vant常见的两种校验方式

<van-form validate-first @failed="onFailed">
        <van-field
          v-model="username"
          name="账号"
       <!-- 正则必须用pattern 来进行判断-->
          :rules="[{ pattern, message: '账号必须字母开头，长度在5~18之间，只能包含字母、数字和下划线' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
        <!-- 这里可以用函数进行判断 -->
         :rules="[{ validator, message: '密码长度必须为5-20个字符' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>

data() {
    return {
      username: "",
      password: "",
    //   此处使用正则校验
       pattern: /^[a-zA-Z]\w{3,17}$/,
    };
  },
  methods: {
    //   此处使用函数校验
    validator(val) {
      return /^.{5,20}$/.test(val);
    },
     onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
  },