关于element中对el-input 自定义验证规则
作者:风如也
这篇文章主要介绍了关于element中对el-input 自定义验证规则,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
element对el-input 自定义验证规则
首先明确要使自定义校验生效的话,必须 prop 和 rules 的 键对应,如示例:(prop="description"在 rules 中有对应的键 )
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm"> <el-form-item label="描述:" prop="description"> <el-input type="textarea" v-model="ruleForm.description" maxLengtn="128" placeholder="请输入描述"></el-input> </el-form-item> </el-form>
rules: { description: [{ required: true, message: '请输入描述', trigger: 'blur' }] }
自定义校验传入自定义参数
elementui的自定义校验不能传入自定义参数,如果想传入自定义参数的话,可以如下操作:
rules: { description: [{ validator: (rule, value, callback) => { this.validateType(rule, value, callback, this.params) }, trigger: ['blur', 'change'] }] }
this.params 相当于自定义参数,然后 this.validateType中就可以接收到自定义的参数,并且也能对输入框的值进行校验了。
示例:
验证一个输入框的值的类型,这个值的类型可能是['list', 'num', 'bool', 'str']中的一种或多种,但如果为 list 的话就只能是 list 类型
// 数据类型有 ['list', 'num', 'bool', 'str'] // 一个输入框的数据类型的情况可能有 // 情况一:数据类型为 ['list'],那输入值的数据类型就可能都满足,就返回 true,最后将输入框中的值用 split(',')转为数组类型即可 // 情况二:数据类型为 ['num', 'bool', 'str'],那输入的值比如 12/true/'abc',用 typeof value 判断输入的数据类型 // let allTypes = ['list', 'num', 'bool', 'str'] /** * @param {*} arr 输入框的数据类型 * @param {*} value 输入框的值 */ function checkType (arr, value) { if (arr.includes('list') && arr.length === 1) { // 还不确定 return true } else { // el-input 得到的值为字符串,所以需要处理,'1', 'true', '是', 0/1,使用 JSON.parse(value) 可以将对应类型的值转换,如果 JSON.parse('abc') 会直接报错 try { value = JSON.parse(value) } catch (error) { // 字符串不做处理 } if (['是', '否'].includes(value)) { value = value === '是' } return arr.some(item => { return (typeof value).indexOf(item) !== -1 }) } } console.log(checkType(['num', 'str', 'bool'], 'abc'))
element-ui自定义表单验证,但是不出现小红心了
基本上按照文档上提供的方式做就没啥大问题 , 我遇到的问题是 , 自定义以后不显示小红星了
<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="确认密码" prop="checkPass"> <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input> </el-form-item> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm2.age"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button> <el-button @click="resetForm('ruleForm2')">重置</el-button> </el-form-item> </el-form>
<script> export default { data() { var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error('年龄不能为空')); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error('请输入数字值')); } else { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } } }, 1000); }; var validatePass = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else { if (this.ruleForm2.checkPass !== '') { this.$refs.ruleForm2.validateField('checkPass'); } callback(); } }; var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')); } else if (value !== this.ruleForm2.pass) { callback(new Error('两次输入密码不一致!')); } else { callback(); } }; return { ruleForm2: { pass: '', checkPass: '', age: '' }, rules2: { pass: [ { validator: validatePass, trigger: 'blur' } ], checkPass: [ { validator: validatePass2, trigger: 'blur' } ], age: [ { validator: checkAge, trigger: 'blur' } ] } }; }, methods: { 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>
我只是照着改了一下
let validatePass = (rule, value, callback) => { console.log(rule); console.log(value); console.log(callback); if (!value) { return callback(new Error("请填写公司名称")); } if (this.form.id) { callback(); return true; } readScmSupplierPage({ name: this.form.name ,type:'2'}) .then(res => { if (res.data.length > 0) { callback(new Error("名称重复")); } else { callback(); } }) .catch(err => { console.log(err); }); };
基本上和自定义没啥关系
rules: { // name: [{ required: true, message: "请输入公司名称", trigger: "blur" }], name: [{ required: true, validator: validatePass, trigger: "blur" }], abbreviation: [ { required: true, message: "请输入公司简称", trigger: "blur" } ] },
只是我发现如果自定义了 , 在这个地方加required: true, 是不起作用的, 必须在form表单上面加
<el-form-item label="公司名称" :label-width="formLabelWidth" prop="name" required> <el-input v-model="form.name"></el-input> </el-form-item>
就这样小红星星就出现啦
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。