正则表达式
1、身份证号:
/(^[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]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/
2、只允许输入中文和英文
/^[\u4e00-\u9fa5a-zA-Z]+$/
3、手机号
/^1[3|4|5|7|8][0-9]\d{8}$/
4、至少包含数字与英文,长度6-20位
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
5、座机
/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/
校验规则定义的几种方式;
统一在组件上使用prop进行绑定
<el-form-item label="法人代表" prop="legalName">
<el-input
size="small"
placeholder="请输入法人代表"
style="width: 240px"
v-model.trim="editForm.legalName"
></el-input>
</el-form-item>
1、简单的校验
legalName: [
{ required: true, message: "请输入法人代表", trigger: "change" },
{ min: 1, max: 20, message: "长度为1-20", trigger: "change" },
{
pattern: /^[\u4e00-\u9fa5a-zA-Z]+$/,
message: "只允许输入中文和英文",
trigger: "change",
},
],
2、官方文档使用的校验规则定义方式
// 饲养地址
breedAddress: [
{
required: true,
validator: (rules, value, cb) => {
if (
!this.changeForm.provinceCode ||
!this.changeForm.cityCode ||
!this.changeForm.areaCode ||
!this.changeForm.address
) {
return cb(new Error("饲养地址不能为空!"));
} else if (this.changeForm.address.length > 40) {
return cb(new Error("长度不得超过40"));
}
return cb();
},
trigger: "blur",
},
],
3、适用于多种校验语法时建议使用以下方式
data(){
// 经度
var checklongitude = (rule, value, cb) => {
const regA = /^\d+(?=\.{0,1}\d+$|$)/;
const regB = /^\d+(\.\d{0,6})?$/;
if (
this.changeForm.longitude <= -180 ||
this.changeForm.longitude >= 180
) {
return cb(new Error("经度范围-180~180"));
} else if (regA.test(value) || regB.test(value)) {
cb();
} else {
return cb(new Error("请输入正确格式经度"));
}
};
}
return {
changeFormRules: {
longitude: [{ validator: checklongitude, trigger: "blur" }],
}
}
}
其中changeFormRules与longitude绑定的组件如下所示
<el-form
:model="changeForm"
:rules="changeFormRules"
ref="changeFormRef"
>
<el-form-item label="经度:" prop="longitude">
<el-input
placeholder="请输入经度"
v-model="changeForm.longitude"
></el-input>
</el-form-item>
</el-form>
清除表单的校验规则
this.$refs.changeFormRef.clearValidate();
清除固定表单组件的校验规则
this.$refs.changeFormRef.fields.map((i) => {
if (i.prop === "companyName") {
i.clearValidate();
}
});