前端驗證必不可少~
輸入框驗證
vue文件部分:
<form :model="form" :rules="rules" ref="form">
<form-item :label="姓名" prop="name">
<kc-input v-model="form.name"></kc-input>
</form-item>
</form>
ts文件部分:
export default Vue.extend({
data() {
return {
form: {
name: "",
},
rules: {
name: [
{ required: true, message: "請輸入姓名", trigger: "blur" },
],
}
}
},
methods: {
// 驗證
submitForm(): void {
const form = this.$refs.form as Vue;
form.validate((valid: any) => {
if (valid) {
this.doSave();
} else {
return false;
}
});
},
doSave() {
console.log("驗證ok");
},
},
});
其中,需要注意的是先定義驗證規則rules,form-item標籤上的prop屬性的值是rules中定義的,這個name在form中和rules中都要保持一致。
下拉框的驗證
在上面代碼的基礎上增加一個下拉框的驗證。
vue文件部分:
<form :model="form" :rules="rules" ref="form" :class="$style.form">
<form-item :label="姓名" prop="name">
<kc-input v-model="form.name"></kc-input>
</form-item>
<form-item :label="課程" prop="courses">
<select v-model="form.courses" placeholder="請輸入課程">
<option
v-for="item in courseOption"
:key="item.id"
:label="item.name"
:value="item.id"
>
</option>
</select>
</form-item>
</form>
ts文件部分:
interface Icourse {
id: string;
name: string;
selected: boolean;
}
export default Vue.extend({
data() {
const courseOption: Icourse[] = [{
id: "1",
name: "語文",
selected: false,
}, {
id: "2",
name: "數學",
selected: false,
}, {
id: "3",
name: "英語",
selected: false,
}];
return {
form: {
name: "",
courses: "",
},
courseOption,
rules: {
name: [
{ required: true, message: "請輸入姓名", trigger: "blur" },
],
courses: [
{ required: true, message: "請輸入課程", trigger: "change" },
],
}
}
},
// ...
});
這裏,下拉框的驗證和輸入框的大致一樣,都需要保持form中和rules中的courses相同,只是這兒是ts的寫法,多了一個ts接口。
很明顯,以上代碼中data部分都是一層對象,如果有嵌套的對象出現,如何驗證呢?
舉個例子,
ts文件的data部分:
data() {
const student= {
info: {
name: "",
age: "",
}
cls: "",
school: "",
};
return {
student,
rules: {
"info.name": [
{ required: true, message: "請輸入姓名", trigger: "blur" },
],
"info.age": [
{ required: true, message: "請輸入年齡", trigger: "blur" },
],
"cls": [
{ required: true, message: "請輸入班級", trigger: "blur" },
],
"school": [
{ required: true, message: "請輸入學校", trigger: "blur" },
]
},
};
},
相應的vue文件部分:
<form :model="student" :rules="rules" ref="student">
<form-item :label="姓名" prop="info.name">
<kc-input v-model="student.info.name"></kc-input>
</form-item>
<form-item :label="年齡" prop="info.age">
<kc-input v-model="student.info.age"></kc-input>
</form-item>
<form-item :label="班級" prop="cls">
<kc-input v-model="student.cls"></kc-input>
</form-item>
<form-item :label="學校" prop="school">
<kc-input v-model="student.school"></kc-input>
</form-item>
</form>
其實很簡單,會了就很簡單~
關注我吧
關注「前端一起學」公衆號 ,看着項目進階學習,讓我們一起學前端,一起進步。