element ui 表单自定义校验规则

最新推荐文章于 2024-08-02 10:16:42 发布

yueF_L

最新推荐文章于 2024-08-02 10:16:42 发布

阅读量741

点赞数 1

分类专栏： vue 文章标签： vue 自定义校验规则

本文链接：https://blog.csdn.net/weixin_38982591/article/details/103925588

版权

vue 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

表单信息

<!-- 信息表单 -->
<el-dialog
  :title="dialogFormTitle"
  :visible.sync="dialogFormVisible"
  :close-on-click-modal="false"
  width="50%"
  center
>
  <el-form
    :model="formInfo"
    ref="formInfo"
    label-width="100px"
    :rules="rules"
    class="demo-ruleForm"
  >
    <el-form-item label="登录账号" prop="username">
      <el-input v-model="formInfo.username"></el-input>
    </el-form-item>
    <el-form-item label="用户姓名" prop="name">
      <el-input v-model="formInfo.name"></el-input>
    </el-form-item>
    <el-form-item label="OA账号" prop="oaAccount">
      <el-input v-model="formInfo.oaAccount"></el-input>
    </el-form-item>
    <el-form-item label="电子邮箱" prop="email">
      <el-input v-model="formInfo.email"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" prop="mobileNo">
      <el-input v-model="formInfo.mobileNo"></el-input>
    </el-form-item>
    <el-form-item label="固话" prop="phoneNo">
      <el-input v-model="formInfo.phoneNo"></el-input>
    </el-form-item>
    <el-form-item label="工号" prop="staffNo">
      <el-input v-model="formInfo.staffNo"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender">
      <el-select v-model="formInfo.gender" placeholder="请选择">
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属地市" prop="topOrgCode">
      <el-select v-model="formInfo.topOrgCode" placeholder="请选择">
        <el-option v-for="org in orgs" :label="org.fullName" :value="org.code" :key="org.code"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="resetForm('formInfo')">重置</el-button>
    <el-button type="primary" @click="onFormInfoBtnPrimaryClicked('formInfo')">保 存</el-button>
  </span>
</el-dialog>

自定义一些校验规则（data()下面）

// 自定义校验规则
// 登录账号验证，只能是唯一
let validUsername = (rule, value, callback) => {
  if (value == "" || value == undefined) {
    callback();
  } else {
    // 查询数据库是否存在该登录用户名
    this.queryUserNameUnique(value).then(res => {
      if (res == null) {
        callback();
      } else {
        console.log(res);
        callback(new Error("该账号已经存在"));
      }
    });
  }
};
// 手机号码校验
let validMobile = (rule, value, callback) => {
  if (value == "" || value == undefined) {
    callback();
  } else {
    let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
    if (!reg.test(value)) {
      callback(new Error("手机号码格式不正确"));
    } else {
      callback();
    }
  }
};
// 邮箱校验
let validEmail = (rule, value, callback) => {
  if (value == "" || value == undefined) {
    callback();
  } else {
    let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
    if (!reg.test(value)) {
      callback(new Error("邮箱格式不正确"));
    } else {
      callback();
    }
  }
};

vue-rules 中使用

mobileNo: [
      { required: true, message: "请输入手机号码", trigger: "blur" },
      // 使用自定义校验
      { validator: validMobile, trigger: "blur" }
    ],
    email: [
      // 使用自定义校验
      { validator: validEmail, trigger: "blur" }
    ]