vue+elementui开发中常用正则校验入门
1. 基于element-ui的form表单校验
(1) 行内校验方式
<el-form-item
label="活动名称1"
prop="name1"
:rules="[
{ required: true, message: '请输入活动名称1', trigger: 'blur' },
{
pattern: /^[\u4e00-\u9fa5]{0,}$/,
message: '格式错误，仅支持中文输入',
},
{
pattern: /^[\S]*$/,
message: '不支持输入空格',
},
]"
>
<el-input v-model="ruleForm.name1" placeholder="行内校验"></el-input>
</el-form-item>
(2) 整体校验
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
<el-form-item label="活动名称2" prop="name1">
<el-input v-model="ruleForm.name1"></el-input>
</el-form-item>
</el-form>
data() {
return {
ruleForm: {
name1: ""
},
rules: {
name2: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ pattern: /^[\S]*$/, message: "不支持输入空格" },
],
},
}
属性rules绑定一个数组，数组的每个元素就是一条验证规则，单个校验规则对象中包含 required/message/trigger/min/max 等常用参数,不常用的不举例了
-
required： 非空验证，字段前边的必填符号*根据此参数展示
-
pattern： 正则表达式，可写多条规则，自动校验
{pattern: /^[^\s]*$/,message: "不支持输入空格"}
-
min/max： 通常对数字大小范围做校验。对于字符串和数组类型，将根据长度进行比较
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
-
trigger：规则触发方式，参数可传string或者数组，传数组
{ required: true, message: "请输入活动名称", trigger:["blur", "change"]}
5. messages: 未通过校验的提示信息，String
6. validator： 可以为指定字段自定义验证函数,实现一些比较复杂的校验
data() {
var validatePass = (rule, value, callback) => {
if(!value) {
return callback(new Error('年龄不能为空'));
}
if(!Number.isInteger(value)) {
callback(new Error('请输入数字值'));
} else {
if(value < 18) {
callback(new Error('必须年满18岁'));
} else {
callback();
}
}
};
return {
ruleForm: {
name3: "",
},
rules: {
name3: [{ validator: validatePass, trigger: "blur" }],
},
};
},
2. 表单校验正则常用字符****
[\u4e00-\u9fa5] 匹配汉字
\w 匹配字母或数字或下划线 等价于 '[A-Za-z0-9_]'
1) 如何阅读正则
Eg:11位手机号码或者12位电话号码
/^((0\d{2,3}-\d{7,8})|(1\d{10}))$/
0开头，\d{2,3}匹配任意2-3位数字，-固定匹配-，\d{7,8}匹配任意7-8位数字；
或 1开头，匹配任意10位数字
如027-86541111或13512341234
Eg:15位或18位身份证号码
//^([1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3})$|^([1-9]\d{5}\d{4}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx])$//
这个正则分为两段来阅读，
第一段是15位身份证规则
/^([1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3})$/
[1-9]数字开头不含0，\d{5}匹配任意数字5位，
\d{2}匹配任意数字2位（年份），
((0[1-9])|(10|11|12))，0开头1-9结尾或10或11或12（月份），
([0-2][1-9])|10|20|30|31)，0-2开头1-9结尾或10或20或30或31（日期），
\d{3}匹配任意数字3位
第二段是18位身份证规则
/^([1-9]\d{5}\d{4}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx])$/
[1-9]数字开头不含0，\d{5}匹配任意数字5位，
\d{4}匹配任意数字4位（年份）
((0[1-9])|(10|11|12))，0开头1-9结尾或10或11或12（月份），
([0-2][1-9])|10|20|30|31)，0-2开头1-9结尾或10或20或30或31（日期）
\d{3}匹配任意数字3位
[0-9Xx]以0-9或x或X结尾
Eg:密码
/^((0\d{2,3}-\d{7,8})|(1\d{10}))$/
/^[a-zA-Z]\w{6,18}$/
[a-zA-Z] 以大小写字母开头
\w{6,18} 任意数字大小写字母下划线6-18位结尾
3. 结合elementui和项目
name2: [
{ required:true,message:'请输入籍贯', trigger: "blur"},
{ pattern: /^[\S]*$/, message: "不支持输入空格" },
{ pattern: /^[\u4e00-\u9fa5]{1,}$/, message: "仅支持输入汉字" },
{ min: 1, max: 10, message: "长度不超过10位",trigger: ["blur", "change"],}
],
*注意：当多条正则存在交集的时候，触发顺序是按下标排列顺序来的，比如不支持空格和仅支持汉字，
当顺序调换的时候，无法触发不支持输入空格的错误提示
欢迎大佬指正，交流，代码之道需举一反三
