表单校验

什么是表单校验呢?

表单校验就是判断用户在 input 里面输入的东西合格不合格,我们看下面的图

不正确的表单 (就是当用户输入的不合法后的效果):

当我们的input 失去焦点后,会判断input框里面的内容合不合法,如果不合法就给提示

正确的(当用户输入正确的内容):

我们来实现这个效果吧:

我们用的是 element-ui 会简便很多的 具体网址(https://element.eleme.cn/#/zh-CN/component/button)

<el-form :rules="rules" ref="wjs" :model="user" class="box">
        <el-form-item prop="username">
          <el-input v-model="user.username" placeholder="输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="user.password"
            placeholder="密码"
          />
        </el-form-item>
</el-form>

这里的表单我们使用的是<el-form></el-form>包裹的 element-ui 的input框 

我们表单校验用的 element-ui 自带的参数,我们绑在最外层的<el-form :rules="rules"></el-form>

data() {
    return {
      user: {
        username: "", // 名字
        password: "", // 密码
      },
      //校验
      rules: {
        // 名字校验
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: "16", message: "长度在3到16之间", trigger: "blue" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },

我们还看到了我在最外层的<el-form ref='wjs'></el-form> 此时我们在methods钩子函数中用了 validate 方法,

doLogin() {
      this.$refs["wjs"].validate((valid) => {
        // 如果 valid为true
        if (valid) {
          console.log("成功");
          // token 请求地址 post请求
          this.$axios.post("login", this.user).then((res) => {
            console.log(res);
            if (res.meta.status == 200) {
              this.$store.commit("login", res.data);
              this.$message.success(res.meta.msg);
              this.$router.push("/admin/home");
            } else {
              this.$message.error(res.meta.msg);
            }
          });
        } else {
          // 校验失败
          console.log("失败了");
          return false;
        }
      });
    },