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;

        }

      });

    },

  },

结果：