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、導入
此處僅作交流學習，版權歸原作者所有。