ElementUI的form表单验证注意事项

ElementUI的form表单验证注意事项

1. 踩过的坑，记录一下。

1. 验证表单时一直提示必填项未填写，实际已经填写了。

2. el-form的正确使用流程

1. el-form就是最外层的form表单，做验证有三个必填属性，不填写验证就会不正确。

• ref属性：相当于ID，稍后的提交按钮函数会用到它。
• :model：绑定要用来验证的数据对象，一定要是对象。
• :rules：用来验证表单的规则。

<el-form ref="form" :model="form" :rules="rules"></el-form>

2. 声明上方要用到的变量：form, rules

data() {
    return {
      form: {
        username: ""
      },
      // 验证的规则
      rules: {
        // 用户名
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20 个字符", trigger: "blur" }
        ],
      }
    };
  },

3. el-form的子标签el-form-item用一个属性prop接收验证规则，input标签绑定数据，注意：

• prop属性的字符串和绑定的变量名一定要相同！。
• model绑定的就是form，所以el-inpput里面不要绑定别的变量。
• prop属性的字符串就是rules里面属性的名字

<el-form ref="form" :model="form" :rules="rules" class="loginBox">
      <el-form-item prop="username"> 
      <!--username和form的username名字要相同！-->
        <el-input v-model="form.username" placeholder="请输入内容" prefix-icon="el-icon-user-solid"></el-input>
      </el-form-item>
      <el-button type="primary" @click="jump">登陆</el-button>
    </el-form>

4. 点击登录再次验证

// 点击登录
jump() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$router.push("/home");
        } else {
          return false;
        }
      });
}

完成。