如有不解，請加羣 897149839
表單驗證
在編寫項目的過程中，我們經常會用到表單，而且常常需要驗證輸入的值，
這時候我們就需要寫驗證規則了。
普通操作
demo的方式是當 input 失去焦點
的時候執行一個驗證函數，是否符合規則，符號則彈窗，或者在一個特定位置顯示提示語
通過ui框架
如element ui\ iview 這些則是將驗證規則放在一個對象中，
通過內置和自定義函數進行驗證
廢話不多說，上代碼
普通操作
//知識點 onBlur="失去焦點事件" onFocus="得到焦點事件"
<input type="text" id="test" onBlur="validateFn('test'),'用戶名'">
function validateFn(id,label){
const val = document.getElementById(id).value
/**此處可用正則
如
var reg = new RegExp("^[^0-9]*$");//創建正則表達式， 從頭到尾都不是數字
if(reg.test(val)）{//滿足正則爲真否則是false
//驗證不通過代碼
}
*/
if(val.length == 0){
alert(label+'不能爲空')
/**
不想用彈窗此處可換成某個標籤元素
如 :*/
document.getElementById('errInfo').innerHTML=label+'不能爲空'
}
}
//其他驗證規則類似，可自由發揮，這裏不做闡述
重點：
1、創建dom，爲輸入框添加觸發驗證的事件，失去焦點是 onBlur=‘Fn()’ 改變時change=‘Fn()’
2、傳入定位當前驗證元素的相關參數 如：id，提示語等 即onBlur=‘Fn(id,msg)’
3、編寫驗證規則函數，通過傳入的元素定位需要驗證的dom值，然後進行判斷
4、通過if 條件判斷是否爲真，根據業務做相應提示， 如彈窗或對應位置顯示錯誤提示語
利用ui框架 element ui或iview等的操作
先上段element ui api的代碼,重點看註釋
/**
model:表單綁定的數據對象如ruleForm：{ pass："","age":""}
rules:驗證規則對象{ key是所有需要驗證的變量名，val是驗證規則數組，從而可知，一個變量可編寫多個驗證規則}
如：rules：{
pass：[
{ required: true, message: "此項不能爲空", trigger: "blur" },
{第二個驗證規則，如過驗證規則是個函數則綁定在 ”validator“ 上，即 validator：function(rule, value, callback){此處編寫驗證代碼，詳情看下方例子}}
]
}
ref：當前表單標識符
重點是：rules對象裏面定義的變量，必須在
<el-form-item label="密碼" prop="pass">
的 prop 中傳入，否則無法觸發驗證
*/
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="密碼" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="確認密碼" prop="checkPass">
<el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="年齡" prop="age">
<el-input v-model.number="ruleForm.age"></el-input>
</el-form-item>
<el-form-item label="手機" prop="phone">
<el-input v-model.number="ruleForm.phone"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
//創建驗證函數
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年齡不能爲空'));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('請輸入數字值'));
} else {
if (value < 18) {
callback(new Error('必須年滿18歲'));
} else {
callback();
}
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('請輸入密碼'));
//callback是回調函數，錯誤信息寫 在new Error（中）
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
callback();//滿足條件則直接回調，不寫任何信息
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('請再次輸入密碼'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('兩次輸入密碼不一致!'));
} else {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: '',
phone:''
},
rules: {
pass: [
{ validator: validatePass,
//validator爲固定值，是綁定驗證函數的，validatePass爲函數名
trigger: 'blur'
/*
trigger 爲觸發事件，
即trigger: 'blur'失去焦點 trigger: 'change' 更多事件看element 文檔
*/
}
],
checkPass: [
{ validator: validatePass2,
//validator爲固定值，是綁定驗證函數的，validatePass2爲函數名
trigger: 'blur' }
],
age: [
{ validator: checkAge,
//validator爲固定值，是綁定驗證函數的，checkAge爲函數名
trigger: 'blur' }
],
phone:[{
min:7,max:11,trigger: 'blur' //min 和max是element 否裝好的驗證值，只需填寫對應數字即可
},type: "number",
trigger: "blur",//blur失去焦點開始觸發驗證 change 則是內容改變時觸發
required: true,//false爲非必填，true爲必填
message: "此項不能爲空，且必須爲數字", //提示信息
transform(value) { //transform這個函數是框架內置函數，不可以變化
//將值轉換成固定類型
return Number(value);
}]
}
};
},
methods: {
submitForm(formName) {
/**
formName是前面ref綁定的值 ref="ruleForm"
執行驗證函數 this.$refs[formName] 獲取表單
.validate執行element表單內置方法
valid是驗證規則是否通過的回調參數
*/
this.$refs[formName].validate((valid) => {
if (valid) {//驗證通過
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
// 重置表單
this.$refs[formName].resetFields();
}
}
}
</script>
重點是看我上方代碼註釋
至此結束，如有不懂或者不好請評論，如果能幫助到你，請給個贊，麼麼噠