ElementUI 表单校验的方法

添加属性

在<el-form>标签下，增加三个属性：

            ref="loginForm"
            :rules="rules"
            :model="formData"

其中，ref="loginForm"表示为表单起个别名，叫做loginForm

:rules="rules",表示定义一套校验规则，名字叫做rules

:model="formData",表示绑定的表单输入数据，名字叫作formData

在 data 中定义 rules 和 model

示例：

              formData: {
                    username: "",
                    password: "",
                },
                rules:{
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入', trigger: 'blur' },
                    ],
                }

在表单提交的方法中，使用校验规则

示例：

        methods: {
            doAddEmp: function(){
                this.$refs.loginForm.validate((valid) =>{
                    if (valid){
                        this.postRequest("/emp/basic/", this.emp).then(resp =>{
                            if (resp){
                                this.dialogVisible = false;
                                this.initEmps();
                            }
                        })
                    }
                })
            },
      }

关键代码：

this.$refs.loginForm.validate((valid) =>{
    if (valid){
    // 校验通过后，执行的代码
    }
})

补充

校验规则 rules 中的属性 trigger，有两个取值：blur 和change。

trigger: "blur" 表示触发方式为 失去焦点；
trigger: "change" 表示触发方式为 数据改变。

每天学习一点点，每天进步一点点。