美文网首页前端技术
angular表单验证及自定义验证器

angular表单验证及自定义验证器

作者: 前端程序员小白 | 来源:发表于2019-10-23 17:59 被阅读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 的第一次匹配或所有匹配之后得到的
    

    这两都是返回新字符串。

    结束啦!

    相关文章

      网友评论

        本文标题:angular表单验证及自定义验证器

        本文链接:https://www.haomeiwen.com/subject/alnkvctx.html