element ui

表单验证

<template>
  <div>
        <el-form
          :model="dj"
          status-icon
          :rules="rules"
          ref="dj"
          label-width="150px"
          class="demo-loginForm"
        >
          <el-form-item label="客户定金：" prop="djs">
           <el-input type="text" v-model="dj" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="loginForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>

</template>

<script>
data() {
    var validateUserAccount = (rule, value, callback) => {
      /**
       * 账号默认是学号，12位数字值
       */
      let reg = /^[0-9]*[1-9][0-9]*$/;
      if (!value) {
        callback(new Error("不能为空"));
      } else {
        if (value.length < 5) {
          callback(new Error("账号输入少了"));
        } else if (value.length > 12) {
          callback(new Error("账号输入多了"));
        } else if (!reg.test(value)) {
          callback(new Error("账号类型错误"));
        } else {
          /**
           * 本地检测没有格式问题之后，
           *  axios/ajax 后端数据库查询，检测用户是否存在
           */
          callback();
        }
      }
    };
 return{
     loginForm: {
        userAccount: "",
        password: "",
      },
    rules: {
        djs: [{ validator: validateUserAccount, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
      },
   }
}

</script>