vant 的表单校验

个人理解：

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

常用两种校验方式

1， 正则表达式

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

表单：

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

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);         }, 

整体代码

<template>   <div>     <h2>表达校验</h2>     <van-form @submit="onSubmit">       <!-- 函数校验 -->       <van-field         v-model="username"         name="用户名"         label="用户名"         placeholder="用户名"         :rules="[{ validator:ur, message: '请输入正确内容' }]"       />       <van-field         v-model="password"         type="password"         name="密码"         label="密码"         placeholder="密码"         :rules="[{ required: true, message: '请填写密码' }]"       />        <!-- 正则校验 -->       <van-field         v-model="mobile"         name="手机号"         label="手机号"         placeholder="请输入手机号"         :rules="telRules"       />        <van-field         v-model="username"         name="年龄"         label="年龄"         placeholder="年龄"         :rules="[{ pattern:ageRules, message: '请填写密码' }]"       />        <div style="margin: 16px;">         <van-button round block type="info" native-type="submit">提交</van-button>       </div>     </van-form>     </div> </template>  <script>     export default {         name: "goodsModel",       data() {           return {             username: '',             password: '',             mobile:'',             ageRules: /^[0-9]{3,7}$/,             /** 表单校验 */             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',             }],           }       },        methods: {         ur(val) {           return /^[0-9]{3,7}$/.test(val);         },         onSubmit(values) {           console.log('submit', values);         },       }     } </script>  <style scoped>  </style> 

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