uView - 表单验证

data() {
            return {
                form: {
                    username: "",
                    password: "",
                    email: ""
                },

trigger{String | Array}：触发校验的方式有2种：
change：字段值发生变化时校验
blur：输入框失去焦点时触发
如果同时监听两种方式，需要写成数组形式：['change', 'blur']

required
布尔值，是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置u-form-item的required为true

pattern
要求此参数值为一个正则表达式，如： /\d+/，不能带引号，如："/\d+/"，组件会对字段进行正则判断，返回结果。

min
最小值，如果字段类型为字符串和数组，会取字符串长度与数组长度(length)与min比较，如果字段是数值，则直接与min比较。

max
最大值，规则同min参数

len
指定长度，规则同min，优先级高于min和max

enum{Array} 指定的值，配合 type: 'enum' 使用

whitespace{Boolean}
如果字段值内容都为空格，默认无法通过required: true校验，如果要允许通过，需要将此参数设置为true

transform{Function}，校验前对值进行转换，函数的参数为当前值，返回值为改变后的值，参数如如下：

value：当前校验字段的值
message
校验不通过时的提示信息

validator{Function}：自定义同步校验函数，参数如下：

rule：当前校验字段在 rules 中所对应的校验规则
value：当前校验字段的值
callback：校验完成时的回调，一般无需执行callback，返回true(校验通过)或者false(校验失败)即可
asyncValidator{Function}：自定义异步校验函数，参数如下：

rule：当前校验字段在 rules 中所对应的校验规则
value：当前校验字段的值
callback：校验完成时的回调，执行完异步操作(比如向后端请求数据验证)，如果不通过，需要callback(new Error('提示错误信息'))，如果校验通过，执行callback()即可

// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
        onReady() {
            this.$refs.myForm.setRules(this.rules)
        }

this.$refs.uForm.validate(valid => {
                if (valid) {
                    console.log('验证通过');
                } else {
                    console.log('验证失败');
                }
            });

<template>
    <view class="">
        <u-form :model="form" ref='myForm'>
            <u-form-item label="用户名" prop="username" label-width="100rpx">
                <u-input v-model="form.username" type="string" placeholder="请输入用户名"></u-input>
            </u-form-item>
            <u-form-item label="密码" prop="password">
                <u-input v-model="form.password" type="password" placeholder="请输入密码"></u-input>
            </u-form-item>
            <u-form-item label="邮箱" prop="email">
                <u-input v-model="form.email" type="email" placeholder="请输入邮箱"></u-input>
            </u-form-item>
        </u-form>
        <button @click="submit">提交</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    username: "",
                    password: "",
                    email: ""
                },
                rules: {
                    username: [{
                        required: true,
                        message: "请输入用户名",
                        trigger: "change"
                    }],
                    password: [{
                        required: true,
                        message: "密码不小于8位",
                        trigger: 'change',
                        min:8
                    }],
                    email: [{
                        required: true,
                        message: "请输入邮箱",
                        trigger: "change"
                    }]
                }
            }
        },
        methods: {
            submit() {
                this.$refs.myForm.validate(valid => {
                    if (valid) {
                        console.log('验证通过');
                    } else {
                        console.log('验证失败');
                    }
                });
            }
        },
        // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
        onReady() {
            this.$refs.myForm.setRules(this.rules)
        }
    };
</script>