Element-ui基本表单验证

html部分

            

              

            

            

              

            

            

              

                

              

            

            

              登录

            

          

data部分:

data() {

    return {

      formData: {

        userName: "",

        passWord: "",

        checked: false,

      },

      formRules: {

        userName: [{required: true,message: "请输入用户名称",trigger: "blur"}],

        passWord: [{required: true,message: "请输入用户密码",trigger: "blur"}],

      }

    };

  },

函数部分：

submitForm(ruleForm) {

      console.log("refs:", this.$refs.formRef);

      let that = this

      this.$refs.formRef.validate((valid) => {

        console.log('valid',valid)

          if (valid) {

            that.handleLogin()

          } else {

            console.log('error submit!!');

            return false;

          }

        });

    },

其中 :model连接的是data里的数据集，:rules连接的是data里的验证规则集，ref用于给此组件命名便于之后函数使用获取整个表单状态用于判断是否符合校验规则，prop用于连接所对应的校验规则。