表单提交是很常见的功能,本文基于uniapp+uview2.0实现表单常见属性校验处理,使用到组件有u–form、Form-item，基本使用说明如下：
    u–form

此组件一般是用于表单验证使用，每一个表单域由一个u-form-item组成，表单域中可以放置u-input、u-checkbox、u-radio、u-switch等。

在表单组中，通过model参数绑定一个对象，这个对象的属性为各个u-form-item内组件的对应变量。
由于表单验证和绑定表单规则时，需要通过ref操作，故这里需要给form组件声明ref="form1"属性。
关于u-from-item内其他可能包含的诸如input、radio等组件，请见各自组件的相关文档说明。

    u-form-item

此组件一般需要搭配Form组件使用，也可以单独搭配Input等组件使用，由于此组件参数较多，这里只对其中参数最简要介绍，其余请见底部的API说明：

prop为传入Form组件的model中的属性字段，如果需要表单验证，此属性是必填的。
labelPosition可以配置左侧"label"的对齐方式，可选为left和top。
borderBottom是否显示表单域的下划线，如果给Input组件配置了边框，可以将此属性设置为false，从而隐藏默认的下划线。
如果想在表单域配置左右的图标或小图片，可以通过leftIcon和rightIcon参数实现。

    下面结合简单的demo介绍一下基本使用，现在有一个用户信息表单信息，包含基本的用户昵称、头像、生日、简介信息，现在需要对各字段进行校验。点击提交时都为空时的异常提示信息如下图:

    代码内容:

    规则说明：
    校验规则需要从u--form组件中指定规则名,此处为rules,data属性中rules用于定义表单各个属性的校验内容如下：

trigger{String | Array}：触发校验的方式有2种：

change：字段值发生变化时校验 blur：输入框失去焦点时触发 如果同时监听两种方式，需要写成数组形式：[‘change’,
‘blur’] 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：任意类型 required
布尔值，是否必填，配置此参数不会显示输入框左边的必填星号，如需要，请配置u-form-item的required为true，注意：如需在swiper标签内显示星号，需要给予swiper-item第一个根节点一定的margin样式

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

    this.$refs.form1.validateField('userInfo.gender')用于执行表单字段的校验处理;
    this.$refs.form1.validate()用于执行表单提交时各个字段的校验处理;

    以上是表单提交使用uview2.0进行的校验实现方案,如果感觉有所帮助欢迎评论区留言点赞或是收藏!

    官方参考链接:https://www.uviewui.com/components/form.html