Form 表单校验，提供了常用的表单校验方法，支持传入自定义校验方法，自带错误消息提示。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

代码演示

部分示例演示，完整使用请参考文档API。

基础使用

通过 ref 属性来注册组件引用信息。注册完成后，我们可以通过this.$refs.form访问到对应的组件实例，并调用上面的实例方法。

<wui-form ref="form">
<wui-input required label="姓名" borderTop placeholder="请输入姓名" v-model="formData.name"></wui-input>
<wui-input required label="手机号" placeholder="请输入手机号码" v-model="formData.mobile"></wui-input>
<view class="wui-btn__box">
  <wui-button text="Submit" bold @click="submit"></wui-button>
</view>
</wui-form>

  const rules: any = [
    {
      name: 'name',
      rule: ['required', 'isChinese', 'minLength:2', 'maxLength:6'],
      msg: [
        '请输入姓名',
        '姓名必须全部为中文',
        '姓名必须2个或以上字符',
        '姓名不能超过6个字符',
      ],
    },
    {
      name: 'mobile',
      rule: ['required', 'isMobile'],
      msg: ['请输入手机号', '请输入正确的手机号'],
    },
    {
      name: 'code',
      rule: ['required'],
      msg: ['请输入验证码'],
    },
    {
      name: 'password',
      rule: ['required', 'isEnAndNo'],
      msg: ['请输入密码', '密码为4~30位数字和字母组合'],
    },
    {
      name: 'confirmPwd',
      rule: ['required', 'isSame:password'],
      msg: ['请输入确认密码', '两次输入的密码不一致'],
    },
    {
      name: 'age',
      rule: ['isNumber', 'range:[1,149]'],
      msg: ['请输入正确的年龄', '请输入正确的年龄范围：1~149'],
    },
    {
      name: 'idCard',
      rule: ['isIdCard'],
      msg: ['请输入正确的身份证号码'],
    },
    {
      name: 'email',
      rule: ['isEmail'],
      msg: ['请输入正确的邮箱'],
    },
    {
      name: 'amount',
      rule: ['isAmount'],
      msg: ['请输入正确的金额，允许保留两位小数'],
    },
    {
      name: 'wechatNo',
      validator: [
        {
          msg: '微信号不正确！请输入6~20位以字母开头，字母、数字、减号、下划线组合的微信号',
          method: checkWxNo,
        },
      ],
    },
    {
      name: 'agree',
      validator: [
        {
          msg: '请勾选并同意《相关条款》',
          method: checkAgree,
        },
      ],
    },
  ];
  const formData = ref<any>({
    name: '',
    mobile: '',
    code: '',
    password: '',
    confirmPwd: '',
    age: '',
    idCard: '',
    email: '',
    amount: '',
    wechatNo: '',
    text: '',
    ageRange: '1',
    motion: '1',
    switchRes: false,
    area: '',
    dateTime: '',
    score: 0,
    img: '',
    agree: false,
  });
const submit = () => {
    console.log(formData.value);
    formRef.value
        .validator(formData.value, rules)
        .then(async (res: any) => {
            console.log(res);
            if (res.isPassed) {
                Toast('校验成功!', { duration: 1500 });
            }
        })
        .catch((err: any) => {
            console.log(err);
        });
};

Slots

插槽名称	说明
default	组件内部内容，由多个表单组件组成

Props

属性名	类型	说明	默认值	平台差异说明
padding	Array	表单外层padding值（上，右，下，左），同css顺序,如：['32rpx','32rpx']	[ ]	-
show	Boolean	是否显示校验错误信息	true	-
disabled	Boolean	是否禁用该表单内的所有组件,透明遮罩层	false	-
top	Number, String	错误提示框top值，单位：px	0	H5端默认为44(px),如果未使用默认导航栏，需要将top值设置为0
left	Number, String	错误提示框left值，单位：rpx	24	-
right	Number, String	错误提示框right值，单位：rpx	24	-
background	String	错误提示框背景色	#FF2B2B	非Nvue端默认值为空，可通过css变量（--wui-color-danger）改变背景颜色
size	Number,String	错误提示文本字体大小，单位rpx	28	-
color	String	错误提示文本字体颜色	#fff	-
radius	Number, String	错误提示框圆角值，单位rpx	16	-
duration	Number	错误提示框单次显示时间，单位ms	2000	-
labelSize	Number, String	FormItem 组件标题字体大小，单位rpx，默认使用全局设置值	0	-
labelColor	String	FormItem 组件标题字体颜色	#333	-
labelWidth	Number, String	FormItem 组件label宽度，单位rpx，默认使用全局设置值	0	-
labelAlign	String	FormItem 组件label对齐方式，可选值：left，right	left	-
asteriskColor	String	FormItem 组件星号颜色	#FF2B2B	-
asteriskPosition	String	FormItem 组件星号位置，可选值：left，right	left	-

Events

事件名	说明	回调参数
-	-	-

Methods

方法名	说明	传入参数	返回参数
validator	表单验证方法	model : Object 表单数据 rules : Array 校验规则数据 checkAll : 是否校验所有元素	{ isPassed : 是否验证通过 errorMsg : 错误消息 }

/*
 单校验方法参数详细说明
 @param model  表单数据对象
 @param rules 表单验证规则
 @param checkAll 是否校验所有元素 （V1.7.0+ 支持）
*/
validator: function(model, rules, checkAll = false)

/*
=======================
model：Object 表单数据，格式 {key:value,key:value}

rules：Array<Object> 校验规则数据，格式 [{name:value,rule:[],msg:[],validator:[]}]
      -------------------
	  name：String，元素的名称，与model中key一致
	  rule：Array<String> ，内置的校验方法名称集合，详细见下方说明
	  msg：Array<String>，对应rule规则方法的错误提示信息
	  validator：Array<Object>，自定义校验方法集合，格式 [{msg:'出错后提示信息',method:Function 校验法法}]
	            -----------
				method：校验方法约定必须返回 true 或 false 作为校验结果
				
checkAll：Boolean 是否校验所有元素并返回所有错误信息。（V1.7.0+ 支持）
=======================
*/


// rule 内置校验方法名称详细说明。组合使用，如：['required','isMobile']
/*
=======================
required：必填项。非必填情况下，如果值为空则不进行校验
isMobile：是否为手机号码
isEmail：是否为邮箱
isCarNo：是否为车牌号
isIdCard：是否为身份证号
isAmount：是否为金额，允许保留两位小数
isNumber：是否为数字
isChinese：是否全为中文
isNotChinese：是否不包含中文，可以有特殊字符
isEnglish：是否为英文
isEnAndNo：是否为英文和数字组合 4~30 位
isEnOrNo：只包含英文或者数字
isSpecial：是否有特殊字符，若有则返回false
isEmoji：是否有表情符号，若有则返回false
isDate：是否为日期：2021-08-09
isUrl：是否为URL地址
isSame：与某个key值是否相同，传值：'isSame:key'，不相同则返回false
range：数值范围，传值：'range:[1,9]'
minLength：最小长度，传值：'minLength:Number'，如：'minLength:1'
maxLength：最大长度，传值：'maxLength:Number'，如：'maxLength:149'
isKeyword：是否包含关键词，多个以英文逗号分隔，包含则返回false。传值：'isKeyword:key1,key2'
=======================
*/