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

整體代碼

<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