js：ElementUI表单验证validate和validateField ⽂档回顾
1、validate：
对整个表单进⾏校验的⽅法，参数为⼀个回调函数。
该回调函数会在校验结束后被调⽤，并传⼊两个参数：是否校验成功和未通过校验的字段。
若不传⼊回调函数，则会返回⼀个 promi
Function(callback:Function(boolean, object))
2、validateField：
对部分表单字段进⾏校验的⽅法
Function(props: array | string, callback:Function(errorMessage: string))
⽰例
代码
<template>
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="80px"
size="mini"
>
<el-form-item
label="姓名"
prop="name"
>
<im="form.name"></el-input>
</el-form-item>
<el-form-item
label="年龄"
prop="age"
>
<el-input v-model.number="form.age"></el-input>
</el-form-item>
<el-form-item
label="学校"
prop="school"
>
<im="form.school"></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
@click="validate"
>校验全部</el-button>
<el-button
type="primary"
@click="validateField"
>校验单个字段</el-button>
<el-button
type="primary"
@click="validateFields"
>校验多个字段</el-button>
</el-form-item>
</el-form>
</template>
<script>
// created at 2021-09-23
export default{
name:'TestForm',
data(){
return{
form:{
name:'',
age:'',
school:'',
},
rules:{
name:[{ required:true, message:'请输⼊姓名', trigger:'blur'}], age:[
{
required:true,
message:'请输⼊年龄',
trigger:'blur',
},
{ type:'number', message:'年龄必须为数字值', trigger:'blur'}, ],
school:[{ required:true, message:'请输⼊学校', trigger:'blur'}], },
};
},
methods:{
/**
* 校验全部字段
*/
validate(){
this.$refs['form'].validate((valid)=>{
console.log(valid);// true/fal
});
},
/**
* 校验单个字段
*/
*/
validateField(){
this.$refs['form'].validateField('name',(errorMessage)=>{
console.log(errorMessage);
let valid = errorMessage ==''?true:fal;
console.log(valid);// true/fal
});
},
/**
* 校验多个字段
*/
validateFields(){
// 需要校验的字段
let fieldsToValidate =['name','age'];
/
/ 将回调转换为Promi
Promi.all(
fieldsToValidate.map((field)=>{
return new Promi((resolve, reject)=>{
this.$refs['form'].validateField(field,(errorMessage)=>{
resolve(errorMessage);
});
});
})
).then((errorMessages)=>{
console.info(errorMessages);
/
/ ['请输⼊姓名', '请输⼊年龄']
// errorMessages ⾥是各个字段的验证错误信息, 如果数组⾥全为空串则所有验证通过// 判断errorMessages ⾥是否全是空串
let valid = errorMessages.every((errorMessage)=>{
return errorMessage =='';
});
console.log(valid);// true/fal
});
},
},
};
</script>
<style lang="scss"scoped>
</style>
