vue antd form表单校验方式总结

1. FormModel

　　1.1 prop 直接写在formItem中

　　<a-form-model :rules="rules">

　　　　<a-form-model-item prop="xxx"> </a-form-model-item>

　　</a-form-model>

　　data() {

　　　　return {

　　　　　　rules: {

　　　　　　　　xxx: [ { required: true, message: 'Please input Activity name', trigger: 'blur' }, { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }, ]

　　　　　　}

　　　　}

　　}

　　1.2 prop 直接写在formItem中，校验是额外逻辑, 这种方式可以根据页面内的其他变量进行检验逻辑的设置

　　<a-form-model :rules="rules">

　　　　<a-form-model-item prop="xxx"> </a-form-model-item>

　　</a-form-model>

　　data() {

　　　　return {

　　　　　　rules: {

　　　　　　　　xxx: [

　　　　　　　　　　{ validator: this.checkOp, trigger: 'change' },
　　　　　　　　　　{ required: true, message: '请填写' }

　　　　　　　　]

　　　　　　}

　　　　}

　　}，

　　methods: {

　　checkOp(rule, value, callback) {
 　　 if (!value && this.isOperationType) {
    　　return callback(new Error('请填写'))
  　　} else {
   　　 return true
  　　}
　　},

　　}

　　1.3 直接在form表单添加校验规则,根据页面内其他操作变化的变量进行控制，当前表单项是否需要校验 

　　<a-form-model-item label="XXX"
                   :rules="{
                     required: 其他变量值,
                     message: '必填'
                   }"
　　></a-form-model-item>
　　1.4 直接写在form表单上，通过help与validateStatus同时控制
　　<a-form-model-item label="XXX"
　　　　　　　　　　　　　:bind={...fileValidator}
　　></a-form-model-item>

　　

data() {
  return {
    fileValidator: {
      help: '', // 通过help进行错误提示
      validateStatus: 'error'
    }}
}