vue + element UI form表单校验 (登录案例)

1、 表单校验规则对象

data() {
    return {
      // 用户登录数据
      userData: {
        username: "",
        password: "",
      },
      // 表单校验规则对象
      rules: {
        //required---是否必填
        //message----提示信息
        //trigger:"blur"---失去光标时提示
        username: { required: true, message: "请输入用户名称", trigger: "blur" },
        password: { required: true, message: "请输入用户密码", trigger: "blur" }
      }
    };
  },

2、el-form上面的rules属性，引用表单校验规则对象,使用ref属性

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

3、el-form-item上面的prop属性

• prop属性作用：指定表单校验不通过的时候，提示消息的位置
• prop的值：应该跟当前表单数据对象的名称保持一致

<el-form-item prop="username">
        <el-input v-model="userData.username" placeholder="请输入账号" autocomplete="off"> 
        </el-input>
</el-form-item>

4、点击登录按钮，验证表单校验是否通过

• 先拿到form组件的组件对象：this.$refs.ruleForm
• 再调用validate系统方法
• 传递箭头函数作为实参
• 箭头函数里面有个系统参数valid
• 如果valid系统参数为true，表示表单校验通过
• 发送数据请求

 login() {
      //使用￥refs绑定表单
      this.$refs.ruleForm.validate(valid => {
        //表单校验通过
        if (valid) {
          // 提交表单
          this.$axios.post('/api/userlogin', this.userData).then(res => {
            console.log(res);
            if (res.code === 200) {
              // 1-成功提示
              this.$message({
                type: 'success',
                message: res.msg
              });
              // 2-将登录信息写入本地存储
              localStorage.setItem('adminLoginInfo', JSON.stringify(res.list));
              // 3-自动跳转到管理中心
              this.$router.push('/');
            } else {
              // 失败提示
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
          });
        }
      });
    }