第六课 element后台登录页面-表单验证篇

一、给el-form加入rules属性

    <el-form :rules="rules">

二、给el-form-item加入prop属性

<el-form :rules="rules" :model="form" ref="form" label-width="60px" class="login-form">
      <h2 class="login-title">vue+Echarts后台管理系统</h2>
      <el-form-item label="用户名" prop="username">
        <el-input placeholder="请输入用户名" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" 
          prop="password">
        <el-input
          placeholder="请输入密码"
          v-model="form.password"
          type="password"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmitLogin">登录</el-button>
      </el-form-item>
    </el-form>

三、在data中配置rules表单校验

 rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 32,
            message: "密码长度在6到32位字符",
            trigger: ["blur", "change"],
          }
        ]
      }

四、调整el-form label-width

<el-form label-width="70px">

五、给提交登录按钮加入表单校验

 methods: {
    onSubmitLogin() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert("条件满足");
        } else {
          alert("条件不满足");
          return false;
        }
      })
    }
  }