使用ant-desigin-vue中form表单遇到的坑总结

 一、form.validateFields() 不执行

问题：

提价表单时，发现验证不通过时正常提醒，但验证通过后点击提交又没反应。最后发现是因为validateFields函数没被执行，通过一步步排查原来是字段验证的部分有问题。

const validateCode = (rule, value, callback) => {
	if (value == '') {
		callback(new Error('请输入字典编号'));
	} 
    else if(!/^[A-z0-9-_]+$/.test(value)){
		callback(new Error('请输入正确格式编号'));
	}
	else if(value.length>32){
		callback(new Error('最大长度为 32 个字符'));
	}
};

 上面的代码中，在字典编号格式验证通过后，没有写else，没有任何动作，当然也没有调用callback 。可是在 antd 中明确写到自定义校验（注意，callback 必须被调用） ，所以造成了悲剧。

 既然问题找到了，哪就好解决了，接下来加入else判断即可：

const validateCode = (rule, value, callback) => {
  if (value == '') {
    callback(new Error('请输入字典编号'));
  } 
  else if(!/^[A-z0-9-_]+$/.test(value)){
    callback(new Error('请输入正确格式编号'));
  }
  else if(value.length>32){
    callback(new Error('最大长度为 32 个字符'));
  }
  else{
    callback()
  }
};

正好我的同事也遇到了相似的问题，我想着小露一手的时候到了。不出意外的话...意外就出现了。

 先看一下代码：

validatePhone(rule, value, callback) {
      if (!value) {
        callback()
      } else {
        if (new RegExp(/^1[3|4|5|7|8][0-9]\d{8}$/).test(value)) {
          var params = {
            tableName: 'sys_user',
            fieldName: 'phone',
            fieldVal: value,
            dataId: this.userId
          }
          duplicateCheck(params).then(res => {
            if (res.success) {
              callback()
            } else {
              callback('手机号已存在!')
            }
          })
        } else {
          callback('请输入正确格式的手机号码!')
        }
      }
    }

咋一看没问题吧，每一个判断下都有回调函数callback。离谱的是最后找了个把小时才发现原来是if判断里有一个请求API（duplicateCheck）没有引入，关键是还没有任何报错提示。

总结：

• 检查每一个判断里是否调用了callback函数
• 如果判断里发送了请求，一定记得提前引入API

二、表单验证 async-validator: ['xxx is not a string']

问题：

在方法校验的时候，会有一部分非 String 类型表单项提示校验未通过，console中显示 async-validator: ["xxx is not a string"]。

解决：

• 去掉 :rules 规则中的 trigger 属性即可；
• 如果是验证数字格式的，就设为type: 'number’。如：

Money: { rules: [{ required: true, type: 'number', message: '请输入金额！', trigger: 'change' }] },