"ant-design-vue": "^1.78"

Form.Item表单验证

监听规则

Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以请确保表单域没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化。
具体参见官网

                        <a-form-model-item
                            label="上传附件"
                            prop="publicityAppendix"
                        >
                            <div>
                                <div style="color: #ff0000">*最多五个*</div>
                            </div>
                            <upload
                                v-model="form.evaluationProcess.publicityAppendix"
                            ></upload>
                        </a-form-model-item>

解决办法

• 把要监听的子元素设置为第一个子元素

• 通过@change方法

  • <upload
        v-model="form.thirdRecordAttachment"
        @change='fileChange()'
    ></upload>
    

    fileChange方法

    fileChange() {
    	this.$refs.form.validateField('thirdRecordAttachment')
    }
    

当ref绑定的表单是一个数组时

<a-form-model
          ref="form"
          v-for="(risk, key) in form.riskSurveyFeedbacks"
          :key="key"
        >
</a-form-model>

所以在进行表单验证时，要使用forEach遍历实现

// 表单验证
    validateForm() {
      let valid = true
      let arr = this.$refs.form
      arr.forEach(v => {
        v.validate(val => {
          if (!val) {
            valid = val
            return
          }
        })
      })
      return this.numValid && valid
    },

自定义表单验证

rules: {
	idCardNumber: [
                    { required: true, message: '请输入正确的身份证号' },
                    { validator: this.validateIdCardNumber }
                ],
}

validateIdCardNumber(rule, value, callback) {
            // 身份证号验证正则表达式
            const idCardNumberRegex = /^(\d{6})(19|20)?(\d{2})(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X|x)?$/
            if (!idCardNumberRegex.test(value)) {
                callback(new Error('身份证号格式不正确'))
            } else {
                callback()
            }
        },

a-input的校验

<a-form-model-item prop='inputValue'>
	<a-input
		v-model="inputValue"
		@input="handleInput"
 	></a-input>
 </a-form-model-item>

handle(event) {
	console.log(event)
}

如下操作：

• 手动输入，触发handleInput事件。直接输入 和 汉字输入打印的结果是不同的

• 通过方法改变inputValue

  • changeValue() {
    	this.inputValue = 'newValue'
    }
    

  • 不会触发hanleinput事件

根据上述情况，如果给inputValue添加表单校验，第二种操作不会触发表单校验

解决办法：

changeValue() {
	this.inputValue = 'newValue'
	this.$refs.form.validateField('inputValue') // 手动校验
}