antd form表单验证validateFields 采坑记录

使用form表单时，如果需要仅仅在前端对输入内容进行验证，可使用rules

 <a-form-item label="姓名" v-bind="formItemLayout">
        <a-input
          class="required"
          placeholder="请输入"
          v-decorator="[
            'name',
            {
              rules: [
                { required: true, message: '姓名不能为空' },
                { min: 2, message: '姓名不能少于2个字' },
                { max: 12, message: '姓名不能大于12个字' },
              ],
            },
          ]"
        />
      </a-form-item>

如果需要正则验证，也可以在rules里面加上：

 rules: [
                { required: true, message: '姓名不能为空' },
                { pattern: /^\w+$/, message: '仅支持字母数字下划线组合' },
                { min: 2, message: '姓名不能少于2个字' },
                { max: 12, message: '姓名不能大于12个字' },
              ],

验证的时机 默认是 change， 也可改为blur 等等，

下面坑来了，如果要用到validator 例如：

 <a-input
          v-decorator="[
            'username',
            {
              rules: [
                {
                  validator: this.checkUsername,
                },
              ],
              validateTrigger: ['change', 'blur'],
            },
          ]"
        />

那么这个方法写的时候要注意了

 checkUsername(rule, value, callback) {
      if (!value) {
        callback("登录名不能为空");
      } else if (!/^\w{4,16}$/.test(value)) {
        callback("登录名长度4至16位，包含字母数字或下划线");
      } else {
        this.$get(`user/check/${value}`).then((r) => {
          if (!r.data) {
            callback("抱歉，该用户名已存在");
          } else {
            callback();
          }
        });
      }
    },

就是一定要有callback的使用，也就是即使没有错误不需要提示也要写一句callback（）；

否则的话 当你提交的时候 summit方法中的this.form.validateFields() 这个方法调用的时候回抛异常，但是浏览器捕获不到，控制台也不能打印出来错误，后果就是一直单击提交按钮页面没有任何反应，控制台没有任何报错，太坑了。。。