<el-form
:model="registerForm"
:rules="registerrules"
ref="registerForm"
>
<el-form-item prop="mobile">
<el-input
v-model.number="registerForm.mobile"
placeholder="请输入手机号"
></el-input>
</el-form-item>
<el-form-item prop="password" style="margin-bottom: 35px">
<el-input
type="password"
v-model="registerForm.password"
placeholder="请输入密码"
@input="inpChange($event)"
>
</el-input>
</el-form-item>
<el-form-item prop="passwords">
<el-input
type="password"
v-model="registerForm.passwords"
placeholder="请再次输入密码"
>
</el-input>
</el-form-item>
</el-form>
data() {
var checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error("手机号不能为空"));
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
if (reg.test(value)) {
callback();
} else {
return callback(new Error("请输入正确的手机号"));
}
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.registerForm.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return {
//注册
registerForm: {
mobile: "",
password: "",
uuid: "",
passwords: "",
inputCode: "",
userType: 0,
},
registerrules: {
mobile: [{ validator: checkPhone, trigger: "blur" }],
password: [
{
required: true,
message:
"只能输入8-16位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种",
trigger: "blur",
},
{
pattern:
/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){8,16}$/,
message:
"只能输入8-16位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种",
},
],
passwords: [{ validator: validatePass2, trigger: "blur" }],
inputCode: [
{ required: true, message: "请输入验证码", trigger: "blur" },
],
userType: [{ required: true, message: "请选择身份", trigger: "blur" }],
},
};
},
前端Vue中常用rules校验规则:
1、是否合法IP地址:
pattern:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
2.是否手机号码或者固话
pattern:/^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
3. 是否身份证号码
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
4.是否邮箱
pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
5.整数填写
pattern:/^-?[1-9]\d*$/,
6.正整数填写
pattern:/^[1-9]\d*$/,
7.小写字母
pattern:/^[a-z]+$/,
8.大写字母
pattern:/^[A-Z]+$/,
9.大小写混合
pattern:/^[A-Za-z]+$/,
10.多个8位数字格式(yyyyMMdd)并以逗号隔开
pattern:/^\d{8}(\,\d{8})*$/,
11.数字加英文,不包含特殊字符
pattern:/^[a-zA-Z0-9]+$/,
12.前两位是数字后一位是英文
pattern:/^\d{2}[a-zA-Z]+$/,
13.密码校验(6-20位英文字母、数字或者符号(除空格),且字母、数字和标点符号至少包含两种)
pattern:/^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/,
14.中文校验
pattern:/^[\u0391-\uFFE5A-Za-z]+$/,