HTML:
<el-form
ref="form"
label-width="120px"
:rules="rules"
:model="ruleForm"
>
<el-form-item
label="身份证号"
size="mini"
class="part"
prop="id_card"
>
<el-input
v-model="ruleForm.id_card"
></el-input>
</el-form-item>
</el-form>
注意!使用校验规则的表单,在data中定义的时候必须要放在一个对象中,:model="ruleForm"这行代码一定要写,不写不生效!
js:
export default {
name: "",
data() {
//自定义校验规则
var checkIdCard = (rule, value, cb) => {
const regIdCard = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
if (regIdCard.test(value)) {
return cb();
}
cb(new Error("您输入的身份证号码不是有效格式"));
};
return {
ruleForm: {
id_card: "", //身份证
},
rules: {
id_card: [
{ required: true, message: "请输入身份证", trigger: "blur" },
{ validator: checkIdCard, trigger: "blur" },
],
}
},
element ui 官网也有详细介绍哦------https://element.eleme.cn/#/zh-CN/component/form
这样也就实现了自定义校验的规则,可以在项目中使用了!