vue+element-ui 自定义表单验证

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、导入

 

 

 

此处仅作交流学习，版权归原作者所有。