element ui 表单自定义校验规则

表单信息

<!-- 信息表单 -->
<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" }
    ]
    
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值