Form组件常用校验规则-2(持续更新中~)

Form组件常用校验规则-2(持续更新中~)

前言

​上一篇​​简单介绍了Form表单校验的基础概念及基础代码框架;今天就开始总结常用的校验规则。一直在纠结应该怎么分类阐述比较好,想了一下觉得还是要先能看到效果,才好继续深入学习(反正我是这样的,有效才有动力)。

参考链接

​ https://element.eleme.io/#/zh-CN/component/form ​

​ https://github.com/yiminghe/async-validator​

使用方式

常规
利用el-form的rules属性,对表单做统一处理

常规的对表单做统一处理的使用方式就是像​​官网​​​示例的那样,​只需要通过 ​​rules​​​ 属性传入约定的验证规则,并将 Form-Item 的 ​​prop​​ 属性设置为需校验的字段名即可;

如:表单的rules属性绑定了data里的rules对象;

表单的form-item 活动名称 的 prop属性对应校验规则中的name规则;

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</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>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
}
};
},
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>
利用el-form-item的rules属性,对表单项单独处理

有时候整个表单可能只需要一个必填项,或者需要对这个必填项做简单的特殊处理,这个时候可以选择这样做:

如:表单中只需要活动名称必填;只需要在所需的el-form-item上绑定rules属性即可;

Form组件常用校验规则-2(持续更新中~)

<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name" :rules="[{ required: true, message: '活动名称不能为空',trigger: 'blur'}]">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</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>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
},
};
},
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>
利用三元表达式,动态处理表单项的必填或非必填

有时候某个表单项是否必填依赖于另一个表单项,或者另外某个字段值;

比如:当活动区域选择了上海,活动时间必填;

实现起来其实很简单,用一个三元表达式即可

(开发经验少的我,见到这种处理方式觉得很棒!)

Form组件常用校验规则-2(持续更新中~)

Form组件常用校验规则-2(持续更新中~)

Form组件常用校验规则-2(持续更新中~)

<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name"
:rules="ruleForm.region == '0' ? [{ required: true, message: '活动名称不能为空',trigger: 'blur'}] : [{ required: false}]">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</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>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
},
};
},
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>
自定义
validator绑定(rule, value, callback) => {} ,基础用法示例

这是官网给出的示例,展示了如何使用自定义验证规则来完成密码的二次验证。需要注意的是:自定义校验 callback 必须被调用。

Form组件常用校验规则-2(持续更新中~)

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</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>
<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.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
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>
validator绑定method,根据接口返回值进行校验并提示错误信息

需求就是,输入id之后调接口判断是否重复,如果重复给出提示;

rule: {
id: [{ required: true, message: '请输入id', trigger: 'blur' },
{ validator: this.check, trigger: 'blur' }],

check(rule, value, callback){
checkData(this.query).then(res =>{
if(res.data.data > 0) {
this.query.id=''
callback(new Error('id重复,请重新输入!'));
} else {
callback()
}
})
},

注意适时清空校验规则 resetFields()

在项目中经常会使用el-dialog里面使用el-form,伴随的业务经常是增加和修改;需要注意关闭dialog时,或者取消相应业务时,清空表单的校验规则!不然下次再打开dialog,还是会有一堆的红色校验信息的提示,体验感很不好。

Form组件常用校验规则-2(持续更新中~)

发表评论

相关文章