angular表单验证及自定义验证器
2019-10-23 本文已影响0人
前端程序员小白
最近遇见了一些问题,需要记录一下。
-
angular的表单验证
-
js字符串的一些内置方法。
我做的响应式表单,不常用这个办法。其中有一个验证是手机号,要求是非空和符合手机号格式。刚好angular的form表单有validator方法可用,就很快写好了。但是死在手机号格式验证这里。死活验证不过。
Validators.pattern = /**
* Validator that requires a control to match a regex to its value.
* @param {?} pattern
* @return {?}
*/
function (pattern) {
if (!pattern)
return Validators.nullValidator;
var /** @type {?} */ regex;
var /** @type {?} */ regexStr;
if (typeof pattern === 'string') {
regexStr = '';
if (pattern.charAt(0) !== '^')
regexStr += '^';
regexStr += pattern;
if (pattern.charAt(pattern.length - 1) !== '$')
regexStr += '$';
regex = new RegExp(regexStr);
}
else {
regexStr = pattern.toString();
regex = pattern;
}
return function (control) {
if (isEmptyInputValue(control.value)) {
return null; // don't validate empty values to allow optional controls
}
var /** @type {?} */ value = control.value;
return regex.test(value) ? null :
{ 'pattern': { 'requiredPattern': regexStr, 'actualValue': value } };
};
};
这个方法是,内置的pattern方法。我参照着做了个模拟方法,但是验证始终是false。我查了很多资料,还是没找到办法。然后在查资料时,发现可以自定义验证器,就自己做了一个。代码如下:
/**
* model driven 数据驱动表单
*
*/
export function validateRex(type: string, validateRex: RegExp): ValidatorFn {
return (control: AbstractControl): {[key: string]: any} => {
// 获取当前控件的内容
const str = control.value;
// 设置我们自定义的验证类型
const res = {};
res[type] = {str}
// 如果验证通过则返回 null 否则返回一个对象(包含我们自定义的属性)
return validateRex.test(str) ? null : res;
}
}
解决!!!
字符串截取
slice(start,end)
start 要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。
end 紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。
返回值:以新的字符串返回被提取的部分
字符串替换
replace(regexp/substr,replacement)
regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。
replacement 必需。一个字符串值。规定了替换文本或生成替换文本的函数。
返回值:一个新的字符串,是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的
这两都是返回新字符串。
结束啦!