Vue簡單的表單驗證

前端驗證必不可少~

輸入框驗證

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>

其實很簡單,會了就很簡單~

 

關注我吧

關注「前端一起學」公衆號 ,看着項目進階學習,讓我們一起學前端,一起進步。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章