ElementUI使用rules点击按钮校验表单和单独校验某个表单元素

一、校验rules中所有元素

• 写在 data 中验证
  表单内容

<!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="用户名称:" prop="userName">
       <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

• <el-form>：代表这是一个表单
• <el-form> -> ref：表单被引用时的名称，标识
• <el-form> -> rules：表单验证规则
• <el-form> -> model：表单数据对象
• <el-form> -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
• <el-form> -> <el-form-item>：表单中的每一项子元素
• <el-form-item> -> label：标签文本
• <el-form-item> -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
• <el-input>：输入框
• <el-input> -> v-model：绑定的表单数据对象属性
• <el-input> -> style：行内样式
• <el-input> -> maxlength：最大字符长度限制

1.data 数据

data() {
    return {
        // 省略别的数据定义
        ...
        // 表单验证
        formRules: {
            userName: [
                {required: true,message: "请输入用户名称",trigger: "blur"}
            ]
        }
    }
}

• formRules：与上文 ‘表单内容’ 中 表单的 :rules 属性值相同
• userName：与上文 ‘表单内容’ 中 表单子元素的 prop 属性值相同
• 验证内容是：必填，失去焦点时验证，如果为空，提示信息为 ‘请输入用户名称’

写在行内

表单内容

<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
    <el-form-item label="银行名称:" prop="accountName" :rules="[{required:true,message:'请输入银行名称',trigger:'blur'}]">
        <el-input v-model="rulesForm.accountName" style="width:300px" maxlength="50"/>
    </el-form-item>
</el-form>

<el-form-item> -> rules：和第一种方式表现的效果一致，只是写法不一样，这里不再赘述
data 数据没有内容

2.methods 方法

methods: {
    // 保存
    onSubmit() {
        this.$refs[formName].validate(valid => {
            if (valid) {
                console.log("success submit!!");
            }else{
                console.log("error submit!!");
            }
        });
    },
    // 取消
    cancel() {
        
    }
}

this.$refs[formName].validate：formName 就是传入的 ‘rulesForm’，与 表单的 rel 属性值一致，这样就指定好需要验证的表单了

二、校验rules中某一项

this.$refs[“ruleForm”].validateField(“account”); // 此行单独校验form表单下的手机号表单项

methods: {
    /**
     * 获取验证码
     */
	onSubmit() {
      this.$refs["ruleForm"].validateField("account");   // 此行单独校验form表单下的手机号表单项
    },
}

总结：

校验rules中所有规则：

this.$refs[formName].validate(valid => {
    if (valid) {
        console.log("success submit!!");
    }else{
        console.log("error submit!!");
    }
});

校验rules中某一项：

this.$refs["ruleForm"].validateField("account");  // account对应某一项的prop的值