vue 的表单验证

1.使用<el-form>包裹整个表单 在其中使用**:model 绑定数据 和:rules**绑定校验规则

<el-form :model="user" :rules="rules">

......................................

</el-from>

2.在script中添加使用数据 以及 校验规则（都添加在data中）

data() {

return {

  user: {

** username:'',**

** password:''**

  },

    rules: {

//校验数据

** username:** [

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

  { min: 3, max: 10, message: "长度在 3 到 10个字符", trigger: "blur" },

],

** password:**[

  { required: true, message: "请输入密码", trigger: "blur" },

  { min: 1, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },

],

}

};

},

3.在input应该被el-from-item包裹 传入prop （prop对应校验数据）

<div class="title">登录</div>

<el-form :model="user" :rules="rules">

    <el-form-item prop="**username**">

      <el-input

        size="medium"

        style="margin: 10px auto"

        prefix-icon="el-icon-user"

        v-model="**user.username"** ></el-input>

  </el-form-item>

</el-from>

4.数据提交校验 在<el-form>中使用ref （校验失败就不会发送请求）ref：本页面获取dom元素

<el-form :model="user" :rules="rules**" ref="userForm">**

在method方法中使用回调判断数据校验

methods: {

login() {

  this.$refs['**userForm'**].validate((valid) => {

    //如果合法

    if (valid) {

      request.post("/user/login", this.user).then((res) => {

        if (!res) {

          this.$message.error("密码错误,请重试");

        } else {

          this.$message.success("登录成功");

          this.$router.push("/");

        }

      });

    }

    //非法

    else {

        console.log("失败");

        return false;

    }

  });

},

},

结果：