el-form自定义规则rules——validate不执行 & 小红心不出现解决方案

1、小红心不出现

需要在自定义规则处再加required:true；此时自定义规则会生效，且元素前方会有小红心提示用户该项为必填项。

rules: {
 	idCard: [{ validator: validateidIdCard, trigger: 'change', required: true }]
}

若不加该字段，规则依旧生效，但是却会出现下方的情况，即无小红心，用户交互感变差

rules: {
 	idCard: [{ validator: validateidIdCard, trigger: 'change' }]
}

2、validate不执行

• 在使用this.refs.ruleForm.validate过程中，加入了函数校验，函数校验中需要每个 if和else都要加入callback( ) ，否 则this.refs.ruleForm.validate失效。

var validateRightName = (rule, value, callback) => {
    if (!value) {
      callback(new Error("权限名称不能为空"));
    }else{
      callback()
    }
};

正确的代码，需每个条件有callback返回。

const checkName= (rule, value, callback) => {
	const rexg = /校验名字的正则/
	 if (!value) {
	   callback(new Error("名称不能为空"));
	 } else if (!rexg.test(value)) {
		callback(new Error("名称不能xxxx"));
	 } else {
		callback();
	}
};

这样，才不会当你的校验条件，走else时，由于没有callback响应，造成form表单的validate不执行

3、自定义规则

场景：form表单校验方法validate不执行问题，

引起问题的原因是：自定义的prop校验方法里，有些条件没有callback函数返回值

src/views/demo.vue

<template>
	<el-form
		:model="formModel"
		:rules="rules"
		ref="ruleForm"
	>
		<el-form-item label="姓名" prop="name">
	        <el-input
	          v-model="formModel.name"
	          placeholder="请输入姓名"
	          clearable>
	        </el-input>
	    </el-form-item>
		<el-form-item>
	        <el-button @click="submitA">提交</el-button>
	        <el-button @click="close">取消</el-button>
      	</el-form-item>
        <el-form-item>
    		<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    		<el-button @click="resetForm('ruleForm')">重置</el-button>
  		</el-form-item>
	</el-form>
</template>
<script>
// 自定义校验方法  此处必须加callback形成闭环
const checkName= (rule, value, callback) => {
	const rexg = /校验名字的正则/
	 if (!value) {
	   callback(new Error("名称不能为空"));
	 } else if (!rexg.test(value)) {
		callback(new Error("名称不能xxxx"));
	 }
};
export default {
	data() {
		return {
			formModel: {
				name: ''
			},
			rules: {
				name: [
					{ validator: checkName, trigger: "blur",required: true }
				]
			}
		}
	},
	methods: {
	  submitA() {
		this.$refs.ruleForm.validate((valid, errObj)=>{
		    valid && console.log('表单校验通过')
		})
	  },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }     
	}
}
</script>

4、附

4.1、element el-select通过ref获取value和label值

1.1、给el-select 加上ref

<el-select 
            ref="systemType"
            v-model="selectValue"
            filterable
            clearable
            placeholder="请选择系统类别"
          >
    

1.2、methods方法中，通过this.$refs获取value和label值

let distributeSelectValue = this.$refs.systemType.selected.value;
let distributeSelectName = this.$refs.systemType.selected.label;

2、el-button

<input type="button" id="myh3" value="获取元素" @click="getElement" ref="mybtn">

console.log(this.$refs.mybtn.innerText)
console.log(document.getElementById('myh3').innerText)

4.2、form表单校验时确定的点

1、是否有ref

2、是否有rules属性且在data中定义了规则

3、props定制的字段名是否和rules里一样

4、输入框或者选择框的v-model绑定的是否和表单中的model是否一致