vue项⽬开发：element的el-form表单rules如何对input和
select。。。
在项⽬开发的时候，⼀般表单检验都是做⾮空检验即可，但是难免会遇到证件号码或者⼿机号校验，通常我们都要调⽤公共js进⾏实
现，input校验较为简单，但是select如果没有⽤过的还是会有点头疼。下⾯我将对我在项⽬开发的⼀部分校验跟⼤家分享⼀下。
⾸先肯定要准备好公共js（validate.js）
基本结构是必要的:rules="formRules" 和  prop="dsrmc"
<el-form
ref="editAdminForm"
key="formRules"
:rules="formRules"
:model="formTable"
label-width="220px"
class="demo-ruleForm"
>
<el-form-item label="当事⼈名称：" prop="dsrmc">
<el-input
v-model="formTable.dsrmc"
placeholder="请输⼊当事⼈名称"
maxlength="100"
></el-input>
</el-form-item>
<el-form-item label="当事⼈类型：" prop="dsrlx">
<el-select
v-model="formTable.dsrlx"
clearable
placeholder="请选择当事⼈类型"
>
<el-option
v-for="(item, index) in dsrlxList"
:
key="index"
:label=""
:value="item.bm"
></el-option>
</el-select>
</el-form-item>
</el-form>
然后就是应⽤validate.js
import { validate } from "@/utils/validate";
select的号码校验
接下来是对select的校验，放在data⾥和return同层级，⾃定义变量定义要校验的参数，this.formTable.zjlx是选择的证件类型下拉选择，选择完证件类型，再输⼊证件号码才有效：
var checkPersonalCertificate = (rule, value, callback) => {      if (!value) {
return callback(new Error("证件号码不能为空"));
}
if (!this.formTable.zjlx) {
return callback(new Error("请先选择证件类型"));
}
switch (this.formTable.zjlx) {
case "1": // ⾝份证
if (validate.idCardValidate(value)) {
callback();
} else {
callback(new Error("证件号码格式有误"));
}
break;
vue element admincase "2": // 中国护照
if (validate.passportValidate(value)) {
callback();
} else {
callback(new Error("证件号码格式有误"));
}
break;
case "3": // 台湾
if (validate.taiwValidateL(value)) {
callback();
} else {
callback(new Error("证件号码格式有误"));
}
break;
case "4": // 港澳
if (validate.hKongMacaoValidate(value)) {
callback();
} else {
callback(new Error("证件号码格式有误"));
}
break;
case "7": // 信⽤代码
if (validate.checkSocialCredit(value)) {
callback();
} else {
callback(new Error("证件号码格式有误"));
}
break;
default:
callback();
break;
}
};
实现的代码：
看清楚红⾊的框框，frRules是表单要传的:rules的参数，只要在frRules⾥⾯到zjhm的校验属性添加多⼀个validator把data⾃定义好的参数传进来：  validator:checkPersonalCertificate 这样即可。
input的号码校验代码
单个input进⾏号码校验更加简单，直接再llphone 。这⾥的validate是引⼊的js，通过定义名直接点js⾥⾯的函数名即可
也欢迎有更好办法的朋友下⾯留⾔交流

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。