vue密码、手机号、用户名输入验证
1、表单中设置prop ref 和 :rules(详情见element-ui官网)用来设置验证规则,如下:
2、在data中写下具体规则,element-ui中的功能不太齐全,需要自定义,主要看怎么去实现自定义规则,先写rule代码
代码中的validator: validUsername、validator: validatePass都是属于自定义的规则,validUsername和validatePass,validPhone,需要我们自己定义,如下:
方法中有isvalidPass、isvalidPhone、isvalidUsername,这些需要我们自己写在js中,import到当前vue文件中来。
1、表单中设置prop ref 和 :rules(详情见element-ui官网)用来设置验证规则,如下:
2、在data中写下具体规则,element-ui中的功能不太齐全,需要自定义,我们主要看怎么去实现自定义规则,先写rule代码
rules: {
username: [
{ required: true, validator: validUsername, trigger: "blur" }
],
password: [
{ required: true, validator: validatePass, trigger: "blur" }
],
repassword: [
{ required: true, validator: validatePass2, trigger: "blur" }
],
mobile: [
{ required: true, validator: validPhone, trigger: "blur" },
{ min: 11, max: 11, trigger: "blur" }
],
email: [
{ required: true, message: "必填", trigger: "blur" },
{ type: "email", message: "请输入正确的邮箱!", trigger: "blur" }
]
},
3、代码中的validator: validUsername、validator: validatePass都是属于自定义的规则,validUsername和validatePass,validPhone,需要我们自己定义,如下:
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else if (!isvalidPass(value)) {
callback(
new Error("密码以字母开头 长度在8~18之间 只能包含字母、数字和下划线")
);
} else {
if (this.formData.repassword !== "") {
this.$refs.ruleForm.validateField("repassword");
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入确认密码"));
} else if (value !== this.formData.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
var validPhone = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号码"));
} else if (!isvalidPhone(value)) {
callback(new Error("请填写正确的手机号码"));
}
};
var validUsername = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入用户名"));
} else if (!isvalidUsername(value)) {
callback(
new Error(
"用户名要求数字、字母、下划线的组合 数字和字母必须存在 长度为4-15个字符"
)
);
}
};
4、方法中有isvalidPass、isvalidPhone、isvalidUsername,这些需要我们自己写在js中,import到当前vue文件中来,如下:新建validate.js文件
js文件中的代码:
// 手机号验证
export function isvalidPhone(str) {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/;
return reg.test(str);
}
// 验证密码 密码,以字母开头,长度在8~18之间,只能包含字母、数字和下划线
export function isvalidPass(str) {
const reg = /^[a-zA-Z]\w{8,18}$/;
return reg.test(str);
}
// 验证用户名 用户名要求 数字、字母、下划线的组合,其中数字和字母必须同时存在*
export function isvalidUsername(str) {
const reg = /^(?![^A-Za-z]+$)(?![^0-9]+$)[0-9A-Za-z_]{4,15}$/;
return reg.test(str);
}
5、导入
此处仅作交流学习,版权归原作者所有。