uView——表单验证

简介

　　界面，绑定对象绑定规则。对象规则，api

　　uView的表单验证：--- 界面（<u-form> <u-form-item> <u-input> 三个包裹），绑定数据 :model , v-model、绑定规则 ref="规则对象"，prop="规则对象“，定义对象( form )和规则（rule），注册和调用api

 

　　<u-form> 

　　　　属性：

　　　　　　:model：绑定对象

　　　　　　ref：通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则。 this.$ref.引用.setResult()。绑定规则

　　　　作用：生成表单域

 

　　<u-form-item>

　　　　属性

　　　　　　label：标签名

　　　　　　prop：绑定rules里规则对象。绑定规则

　　　　作用：设置验证规则

　　

　　<u-input>

　　　　属性

　　　　　　v-model：双向绑定。绑定对象

• type{String}
  内置校验规则，如这些规则无法满足需求，可以使用正则匹配、或者使用validator自定义方法并结合uView自带验证规则。

  • string：必须是 string 类型，默认类型
  • number：必须是 number 类型
  • boolean：必须是 boolean 类型
  • method：必须是 function 类型
  • regexp：必须是 regexp 类型，这里的正则，指的是判断字段的内容是否一个正则表达式，而不是用这个正则去匹配字段值
  • integer：必须是整数类型
  • float：必须是浮点数类型
  • array：必须是 array 类型
  • object：必须是 object 类型
  • enum：必须出现在 enmu 指定的值中
  • date：必须是 date 类型
  • url：必须是 url 类型
  • hex：必须是 16 进制类型
  • email：必须是 email 类型
  • any：任意类型

　　　　　　placeHodler：提示信息

 

　　生成对象

　　　　在data里生成双向绑定的

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

　　　

　　绑定规则

　　　用rules绑定规则：

　　　　rules里需要prop绑定的对象定义规则

　　　　规则参数

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()即可

 

　　注册规则api

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

　　

　　校验规则api

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

 

　　总结： 

　　　　uView的表单验证：--- 界面（<u-form> <u-form-item> <u-input> 三个包裹），绑定数据 :model , v-model、绑定规则 ref="规则对象"，prop="规则对象“，定义对象( form )和规则（rule），注册和调用api

 

使用

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