uniapp之uView-ui简单表单验证

<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>