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

标签：return,vant,rules,校验,表单,validator,message
来源： https://www.cnblogs.com/duyibo/p/16319232.html