uniapp之uView-ui簡單表單驗證

萬變不離其宗，有此示例已經夠大部分需求。

form.vue

<template>
    <view class="form-content">
        <u-form :model="form" ref="uForm" label-width="120">
            <u-form-item label="姓名" prop="name">
                <u-input v-model="form.name" />
            </u-form-item>
            <u-form-item label="簡介" prop="intro">
                <u-input v-model="form.intro" />
            </u-form-item>
            <u-form-item label="手機號" prop="mobile">
                <u-input v-model="form.mobile" />
            </u-form-item>
        </u-form>

        <u-button @click="submit">提交</u-button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    name: '',
                    intro: '',
                    mobile: null
                },
                rules: {
                    name: [{
                        required: true,
                        message: '請輸入姓名',
                        // 可以單個或者同時寫兩個觸發驗證方式
                        trigger: 'blur'
                    }],
                    intro: [{
                        required: true,
                        min: 5,
                        message: '簡介不能少於5個字',
                        trigger: 'blur'
                    }],
                    // 手機號
                    mobile: [{
                            required: true,
                            message: '請輸入手機號',
                            trigger: ['change', 'blur'],
                        },
                        {
                            // 自定義驗證函數，見上說明
                            validator: (rule, value, callback) => {
                                // 上面有說，返回true表示校驗通過，返回false表示不通過
                                // this.$u.test.mobile()就是返回true或者false的
                                return this.$u.test.mobile(value);
                            },
                            message: '手機號碼不正確',
                            // 觸發器可以同時用blur和change
                            trigger: ['change', 'blur'],
                        }
                    ]
                }
            };
        },
        methods: {

            submit() {
                this.$refs.uForm.validate(valid => {
                    if (valid) {
                        console.log('驗證通過');
                    } else {
                        console.log('驗證失敗');
                    }
                });
            }
        },
        // 必須要在onReady生命週期，因爲onLoad生命週期組件可能尚未創建完畢
        onReady() {
            this.$refs.uForm.setRules(this.rules);
        }
    };
</script>

<style scoped lang="scss">
    .form-content {
        padding: 30px;
    }
</style>