vue+element-ui 自定義表單驗證

vue密碼、手機號、用戶名輸入驗證

一、表單中設置prop ref 和 :rules（詳情見element-ui官網）用來設置驗證規則,以下：

二、在data中寫下具體規則，element-ui中的功能不太齊全，須要自定義，主要看怎麼去實現自定義規則，先寫rule代碼

代碼中的validator: validUsername、validator: validatePass都是屬於自定義的規則，validUsername和validatePass，validPhone,須要咱們本身定義，以下：
方法中有isvalidPass、isvalidPhone、isvalidUsername，這些須要咱們本身寫在js中，import到當前vue文件中來。

 

一、表單中設置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>

 

二、在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" }
　　]
},

 

三、代碼中的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個字符"
　　　　　　)
　　　　);
　　}
};

 

四、方法中有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);
}

 

五、導入

 

 

 

此處僅做交流學習，版權歸原做者全部。