element-form使用formruler发送ajax请求

1 使用背景

在进行表单验证时,很多时候都要向后端发送请求验证输入数据的唯一性

2 使用方式

1 使用rules绑定表单验证对象, 使用prop属性绑定属性

<el-form ref="form" :model="form" :rules="formrules" > 
    <el-form-item label="单位名称："   prop="groupName">
        	<el-input type="text" v-model="form.groupName"   maxlength="200"></el-input>
     </el-form-item>
</el-form>

2 定义formruler组件

(1) 普通验证

formrules: {
		groupName: [{required: true, message: "单位名称不能为空", trigger: "blur"}]
}

required:是否必填

message:提示信息

trigger:触发事件

此时,当输入框失去焦点时,会触发表单验证事件,如果为空,则提示对应message信息

(2) 发送ajax请求的表单验证

formrules: {
				groupCode: [{
					required: true,
					validator: (rule, value, callback) => {
						if (value != "" && value != undefined) {
							$.ajax({
								url:"${ctx}/platGroup/checkGroupCode",
								type:"post",
								dataType:"json",
								data:{
									groupCode:value
								},
								async:true,
								success:function(result){
									if (result == false) {
										callback(new Error("单位编码不能重复"))
									}  else {
										callback();
									}
								}
							});
						} else {
							callback(new Error("单位编码不能为空"))
						}
						callback();
					}, trigger: "blur"
				}],
			}

validator:表单验证时触发的函数

参数:

        value:表单输入框中的值

        callback:回调函数

注意:

验证函数中每一个if分支都需要调用callback函数,否则会导致表单无法提交