美文网首页前端技术
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表单验证及自定义验证器

    最近遇见了一些问题,需要记录一下。 angular的表单验证 js字符串的一些内置方法。 我做的响应式表单,不常用...

  • 15.《Angular表单校验》

    一、使用Angular自带的表单校验器 运行结果: 二、自定义表单校验器 当然我们也可以将验证器方法独立出来 使用...

  • Angular表单验证

    angular的表单验证由验证器Validators模块提供,所以如果你的表单需要验证就要将此模块引入 一、想使用...

  • Java - 收藏集 - 掘金

    强大的 Angular 表单验证 - 前端 - 掘金Angular 支持非常强大的内置表单验证,maxlength...

  • vue+element 表单验证问题

    常规表单验证、自定义表单验证、动态增删表单验证 1.常规表单验证 2.自定义表单验证 3.动态增减 a.表单 b.表格

  • 表单相关

    1.自定义验证器 1.1 行内验证器 当表单类中包含以'validate_字段属性名'形式命名的方法时,在验证字段...

  • 表单验证与回填以及表单常见bug解决方法

    表单的验证 正则验证 pattern 自定义验证validator 表单注意事项 ~获取值,使用getField...

  • 验证

    验证 表单请求验证类 必须 使用 表单请求 - FormRequest 类 来处理控制器里的表单验证。 验证类的 ...

  • AngularJS实现表单验证

    本文主要介绍了AngularJS实现表单验证,客户端表单验证是AngularJS里面最酷的功能之一。Angular...

  • Angular表单验证

    angular4里一个响应式编程的小例子 Angular2 响应式表单验证 Angular开发(十一)-关于响应式...

网友评论

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

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