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官网）用来设置验证规则,如下：
<el-form ref="ruleForm" :rules="rules" :model="formData" label-position="left" label-width="100px">
<el-form-item label="用户名" prop="username" >
<el-input v-model="formData.username" type="text" :disabled="dialogStatus==='update'? true : false"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password" >
<el-input v-model="formData.password" type="password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="repassword" >
<el-input v-model="formData.repassword" type="password" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="mobile">
<el-input v-model="formData.mobile" type="text" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email" type="text" auto-complete="off"></el-input>
</el-form-item>
</el-form>
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、导入
此处仅作交流学习，版权归原作者所有。