Ant Design 表单项校验方式

拓展：Ant Design 表单的官方文档说明

1. 利用 FormItem 的 prop 属性

1）说明：通过 rules 属性传入约定的验证规则，并将 FormItem 的 prop 属性设置为需校验的字段名即可。
2）代码实现
① html 部分

• 给表单设置 rules 属性
• 给表单项设置 prop 属性（对应的校验规则名）

<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" >
 <a-form-model-item ref="text" label="文字" prop="text">
  <a-input v-model="form.text" @blur=" () => { $refs.text.onFieldBlur(); } " />
 </a-form-model-item>       
</a-form-model>

② js部分

• 设置表单项的校验规则

data() {
 return {
  form: {
   text: '', // 文字
  },
  rules: { text: { required: true, message: 'Please input text!', trigger: 'blur' }, }, 
 }
}

3）参数说明

2. validator 自定义校验规则

1）代码实现
① html 部分

• 给表单设置 rules 属性
• 给表单项设置 prop 属性（对应的校验规则名）

<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol" >
 <a-form-model-item ref="denominator" label="分母" prop="denominator">
  <a-input v-model="form.denominator" @blur=" () => { $refs.denominator.onFieldBlur(); } " />
 </a-form-model-item>
</a-form-model>

② js部分

• 在 data 中设置一条新的校验规则
• 使用 validator 属性，在 rules 中添加这条规则。

data() {
 const checkDenominator = (rule, value, callback) => {
 if (value === '0') {
  return callback('分母不能为0')
 }
 callback()
}

 return {
  form: { denominator: '', // 分母 },
  rules: {
  denominator: [{ required: true, message: 'Please input denominator!', trigger: 'blur' },
        		{ validator: checkDenominator,trigger:'blur' }]
  },
 }
}

3. 遇到的问题

1）场景描述：该表单项为选填项，但是只能是大于0的数字。
2）代码实现：

const checkSize = (rule, value, callback) => { 
 if (value < 0 || typeof (value) !== "number") {
  return callback('请输入一个大于0的数字！')
 }    
}

3）问题描述：
当所填内容不满足要求时，会弹出错误提示，如下图。
当把表单内容删除后，提示信息仍在，但是表单项不是必填项。

4）改进代码：
当输入框有值的时候再进行校验。

const checkSize = (rule, value, callback) => { 
 if(value){
  if (value < 0 || typeof (value) !== "number") {
   return callback('请输入一个大于0的数字！')
  } 
 }   
}

这时又有新的问题，当把表单内容删除后，校验信息残留。

5）改进代码：
当输入框没有值的时候，清空验证信息。

const checkSize = (rule, value, callback) => {
 if (value) {
  if (value < 0 || typeof (value) !== "number") {
    return callback('请输入一个大于0的数字！')
   }
 } else {
  this.$refs.ruleForm.resetFields();
 }
}