vant 的表单校验

个人理解：

将rules当成一个对象去理解，传参时可以是整个对象或者对象的某一属性

常用两种校验方式

1， 正则表达式

1.1自定义校验规则（校验规格也可传入多条）：

表单：

:rules="telRules"

data:

telRules:[{
        required:true,
        message: '手机号不能为空',
        trigger:blur,
      },{
        validator: value => {
          return /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/
          .test(value)
        },
        message: '请输入正确的手机号格式',
        trigger: 'onBlur',
      }],

1.2 只传入属性：

根据文档传入对应参数：

表单：

:rules="[{ pattern:ageRules, message: '请填写密码' }]"

data：

  ageRules: /^[0-9]{3,7}$/,

2， 函数式

校验写在方法里

（ps:就是在这里遇到小坑，按照文档自己写发现只有函数名是validator的校验方法能生效，后来才想明白通过validator:名字 的方式可以指定。被自己蠢哭了...）

表单：

   :rules="[{ validator:ur, message: '请输入正确内容' }]"

data:

     ur(val) {
          return /^[0-9]{3,7}$/.test(val);
        },

整体代码

参考博客：
https://blog.csdn.net/weixin_42322454/article/details/113143385