标签：return vant rules 校验 表单 validator message

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。