前兩天寫(xiě)后臺(tái)管理系統(tǒng)皂冰，寫(xiě)的我都不知道自己是誰(shuí)了贿讹，太復(fù)雜了吠裆，尤其是在用iview和vue寫(xiě)的時(shí)候就更不好搞了伐谈，之前用iview做驗(yàn)證的時(shí)候也是費(fèi)了我很大的力氣，這幾天稍微閑一點(diǎn)试疙，我要把這一點(diǎn)點(diǎn)經(jīng)驗(yàn)告訴大家诵棵，希望能幫到大家。
<i-form ref= 'formItem' :model="formItem" :rules='ruleValidate'>
<form-item label="用戶(hù)名稱(chēng)" prop='username' >
<i-input v-model="formItem.username" placeholder="請(qǐng)輸入用戶(hù)名"></i-input>
</form-item>
<form-item label="用戶(hù)密碼" prop="password">
<i-input v-model="formItem.password" type="password"></i-input>
</form-item>
<form-item label="再次密碼" prop="rpassword">
<i-input v-model="formItem.rpassword" type="password"></i-input>
</form-item>
<form-item label="用戶(hù)組" prop="group">
<i-select v-model="formItem.group">
<i-option value="0">選擇用戶(hù)組</i-option>
<i-option v-for="item in group" :value="item.id">{{item.typename}}</i-option>
</i-select>
</form-item>
<form-item label="用戶(hù)名稱(chēng)" prop='nick'>
<i-input v-model="formItem.nick" placeholder="請(qǐng)輸入昵稱(chēng)"></i-input>
</form-item>
<form-item label="聯(lián)系電話(huà)">
<i-input v-model="formItem.tel" placeholder="請(qǐng)輸入電話(huà)"></i-input>
</form-item>
<form-item label="聯(lián)系 Q Q">
<i-input v-model="formItem.qq" ></i-input>
</form-item>
</i-form>
上面這個(gè)是html部分用的是iview的表單組件效斑，做驗(yàn)證的得時(shí)候首先<i-form>里面的ref,model,rules是不能缺少的非春，其次就是<form-item>里面加上prop屬性，用vue的話(huà)v-model必不可少缓屠。
var vue= new Vue({
el: '#addModule',
data(){
var validateuser = function(rule, value, callback){
if(!value){
return callback(new Error("請(qǐng)輸入用戶(hù)名"));
}else if(!/^[a-zA-Z\d]+$/.test(value)){
return callback(new Error("請(qǐng)正確輸入用戶(hù)名"))
}else{
callback();
}
};
var validatenick = function(rule, value, callback){
if(!value){
return callback(new Error("請(qǐng)輸入用戶(hù)名稱(chēng)"));
}else if(!/^[\u4e00-\u9fa5]+$/.test(value)){
return callback(new Error("請(qǐng)正確輸入用戶(hù)名稱(chēng)"))
}else{
callback();
}
};
var validatePass = function(rule, value, callback) {
if (value === '') {
callback(new Error('請(qǐng)輸入密碼'));
} else {
callback();
}
};
var validatePassCheck = function(rule, value, callback){
if (value === '') {
return callback(new Error('請(qǐng)?jiān)俅屋斎朊艽a'));
} else if (value !== vue.formItem.password) {
return callback(new Error('兩次密碼不一致'));
} else {
callback();
}
};
return{
group:[],
formItem:{
'username':"",
'password':"",
'rpassword':"",
'nick':'',
'tel':"",
'qq':"",
'group':""
},
ruleValidate:{
username : [{validator: validateuser,trigger: 'blur'}],
nick : [{validator: validatenick,trigger: 'blur'}],
password : [{validator: validatePass, trigger: 'blur' },{min:6,message:'請(qǐng)輸入最少6位'}],
rpassword : [{validator: validatePassCheck, trigger: 'blur' },{min:6,message:'請(qǐng)輸入最少6位'}],
group:[{required: true, type: 'string', message: '請(qǐng)選擇分組', trigger: 'change'}],
}
}
},
上面的是js部分奇昙，驗(yàn)證的信息寫(xiě)在data里面，然后在return里面調(diào)用敌完，寫(xiě)好的驗(yàn)證規(guī)則要在validator(驗(yàn)證器)里面調(diào)用储耐，后面的trigger是什么時(shí)候觸發(fā)。
嗯就是這樣了滨溉，剛開(kāi)始自己自己琢磨的時(shí)候什湘，確實(shí)很難长赞，后來(lái)做出來(lái)之后就差不多明了了。iview自定義表單驗(yàn)證
