js: ElementUI表单验证validate和validateField （部分表单校验）

1、validate：

对整个表单进行校验的方法，参数为一个回调函数。
该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
若不传入回调函数，则会返回一个 promise

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"
>
<el-input v-model.trim="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"
>
<el-input v-model.trim="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/false
　　});
},

/**
* 校验单个字段
*/
validateField() {
this.$refs['form'].validateField('name', (errorMessage) => {
　　console.log(errorMessage);

　　let valid = errorMessage == '' ? true : false;

　　console.log(valid); // true/false
});
},

/**
* 校验多个字段
*/
validateFields() {
// 需要校验的字段
let fieldsToValidate = ['name', 'age'];

// 将回调转换为Promise
Promise.all( fieldsToValidate.map((field) => {
　　return new Promise((resolve, reject) => {
　　this.$refs['form'].validateField(field, (errorMessage) => {
　　　　　　　　resolve(errorMessage); // all返回一个数组
    });
    });
})
).then((errorMessages) => {
　　console.info(errorMessages);
　　//  ['请输入姓名', '请输入年龄']

　　// errorMessages 里是各个字段的验证错误信息, 如果数组里全为空串则所有验证通过
　　// 判断errorMessages 里是否全是空串
　　let valid = errorMessages.every((errorMessage) => { // every全部返回为true，结果才为true
　　　　return errorMessage == '';
　　});

　　console.log(valid); // true/false
});
},
},
};
</script>

<style lang="scss" scoped>
</style>