Element表单输入框失焦向服务端验证(Vue实现)

前言：一般情况下，表单的作用为：输入数据->正则验证格式->提交到后端数据验证

而遇到输入项较多时，如果费老大劲把数据填完，提交返回该数据已存在！

就会让人很抓狂！

本文介绍表单输入数据，失焦立即验证内容。

先上代码：

<template>
	<el-form :model="formInfo" :rules="rules" ref="formInfo">
		<el-form-item prop="Number" style="width: 100%;">
			<el-input clearable v-model="formInfo.Number">
			</el-input>
		</el-form-item>
	</el-form>
</template>

<script>
	export default {
		data() {
			//用于表单验证的回调
			var validator = (rule, value, callback) => {
				if (!value) { //可以更改判定条件
					return callback(new Error('不能为空'))
				} else {
					return callback() //没有会使this.$refs[formName].validate有问题
				}
			}

			return {
				formInfo: {
					Number: ''
				},
				rules: {
					Number: [{
							required: true,
							message: '请输入数字',
							trigger: 'blur'
						},
						{
                        //重点代码
							validator: (rule, value, callback) => {
								//此处注意箭头函数，有this指向的问题 
								let _this = this
								let response = function(Count) {
									if (Count > 0) {
										callback(new Error('数据已存在')))
									} else {
										//没有会使this.$refs[formName].validate有问题
										callback() 
									}
								}
								_this.CheckAttributes(params, response)
							},
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods:{
			CheckAttributes(params,response) {
                //网络请求的代码
                /*
                    。
                    。
                    省略
                    。
                    。 
                */
				//最后返回请求结果
                response(res)
			}
		}
	}
</script>

<style>
</style>

主要原理通过rules中的validator 函数回调实现，CheckAttributes为接口函数，根据请求结果判断输入框内容是否已存在，再通过callback(new Error('数据已存在的提示词')))

注意：无论返回结果是什么，都要加上else{ callback() }   形成一个闭环，

           如果没有，再提交验证时会使this.$refs[formName].validate有问题。​​​​​​​