Element el-form 表单校验，保存或提交验证某一项或者多项；validateField 的使用

通常新增或者编辑对form表单的校验都是全局性的校验：

this.$refs.form.validate( valid => {
    if (valid) {
        // 校验通过，业务逻辑代码...
    }
});

如果需要对表单里的特定几个必填项进行校验，应该如何实现？ 

业务场景：下图点击保存按钮时，只需要校验前两项，其余参数不做校验，保存为草稿；点击提交按钮时，表单里面所有的必填项需要校验。

Element-ui 官网文档截图：

 

 validateField 这个方法接受两个参数，第一参数为数组或者字符串，第二个参数为回调函数

 

// 点击保存、提交
toSubmit(type) {
    let valiList = type === 'save' ? ['projectName', 'projectCode'] : ['projectName', 'projectCode', 'projectType']
    let hasError = false;
    this.$refs.ruleForm.validateField(['ip', 'port', 'user', 'pwd'], err => {
        if (err) {
            hasError = true;
            this.$message.warning('请检查必填项是否填写完整/正确')
            return false;
        }
    });
    if (!hasError) {
        // 校验通过，todo...
    }
}

如果要校验某一项，第一个参数传字符串就可以了。 

tips:

我们也可以动态更改rules规则里面的required字段，但这样点击保存时页面上的必填校验  *  会消失，用户体验会非常不友好。其实还有很多方式可以实现，可以评论区探讨一下~