Appearance

rules

soUni 提供了一套 Vue UI 框架中最简洁方便的验证方案。

  • 验证规则可以直接预设配置在表单项 itemrule 属性上,并根据label信息,自动生成验证提示。如果你不喜欢这样的配置,仍然可以在 rules 对象中 用符合 async-validator 的方法进行表单验证,都是兼容的。
  • 我们可以通过 formupdateRules 来更新表单项的验证规则。
  • rules 核心函数在 @extends/rules.js 中,可自行添加新的验证规则。

使用

模板代码

<so-form ref="soForm" :model="form" :rules="rules">
    <row>				
        <item span="4" label="姓名" prop="name" :rule="['reqPlus','zn']"><txt v-model="form.name" /></item>
        <item span="4" label="电话" prop="phone"><txt v-model="form.phone" /></item>
        <item span="4" label="性别" prop="sex" rule="req">
            <so-sheet :list="actionSheetList" v-model="form.sex" :canEmpty="true" @confirm="selectSex" />
        </item>
    </row>
    <submit @submit="submitForm" text="提交" /><reset />
</so-form>

js代码

...
data(){
    return {
        form : {
            name: '',
            phone: '',
            sex: '',
            age : '',
        },
        rules: {
			date : [this.$r.req('日期')],//在这里也可以通过this.$r 来验证字段
            name: [{//async-validator 方式配置
                    required: true,
                    message: '此为必填字段'// blur和change事件触发检验
                    trigger: ['blur', 'change'],
                },
                // 正则判断为字母或数字
                {
                    pattern: /^[0-9a-zA-Z]*$/g,
                    // 正则检验前先将值转为字符串
                    transform(value) {
                        return String(value);
                    },
                    message: '只能包含字母或数字'
                },
                // 6-8个字符之间的判断
                {
                    min: 6,
                    max: 8,
                    message: '长度在6-8个字符之间'
                },
                // 自定义规则判断是否包含字母"A"
                {
                    validator: (rule, value, callback) => {
                        return this.$u.test.contains(value, "A");
                 },
                 message: '必须包含字母"A"'
            }]
    }
},
...

绑定验证规则

uni 原生的表单是没有提供验证的,uview提供了一整套验证方法,但考虑兼容性,需要用户在页面加载完成时手动通过 seRules 方法绑定 rules 到表单上,so-form 通过全局 mixin 在页面加载的时候,自动检测页面是否有表单,并自动绑定 属性 rules 到表单上。另外,还实现了一整套更加简易的表单验证方法,可以直接在 item 组件上直接添加 rule 属性来绑定验证规则,并可以根据需求变化,动态更新表单项的验证规则。如:

<item span="4" label="姓名" prop="name" :rule="['reqPlus','zn']"><txt v-model="form.name" /></item>
<item span="4" label="范围数值" prop="num" rule="req|range[1,20,true,true]"><txt v-model="form.num" /></item>
<item span="4" label="邮箱" prop="email" rule="req|email"><txt v-model="form.email" /></item>
  • item 组件的 rule 属性可以为数组 或 字符串,多个验证规则在字符串中通过 | 隔开,参数写在验证规则后的中括号里。
  • 表单的验证规则是 so-formrules 属性和 item 标签上 rule 属性的集合,item 属性优先级更高,合并是覆盖式合并,最好不要多处书写。

更新验证规则

this.$refs.soForm.updateRules({//对象参数,同时对多个字段进行更新
    name : 'req|cn',
    phone : ['req','tel'],
    age : 'req',
    sex : '',
    num : {
        valid : [{
            min: 5, 
            message: '数值不能少于5个字', 
            trigger: 'change'
        }]
    }
});

this.$refs.soForm.updateRules('date','');//去除date字段已有全部验证

rules 现所有验证方法

函数名说明参数
req普通必填验证,可验证字符串Function(val)
reqPlus增强版必填验证,包括 undefined,null,{},[] 均为未填写Function(val)
required同reqFunction(val)
len字符长度验证Function(val,min,max)
email验证电子邮件Function(val)
username普通的用户名,需为字母、数字或下划线Function(val)
normalPass需为字母及数字Function(val)
complexPass须含大小写字母、数字及特殊字符Function(val)
cn中文验证Function(val)
en只能含英文字符Function(val)
code只能包含汉字、英文字母、数字及下划线Function(val)
engNum需为英文字母或数字Function(val)
chsEngNum需为汉字、英文字母或数字Function(val)
chsEngNumB需为汉字、字母或数字且不能为纯数字Function(val)
num必须为数字Function(val)
pNum必须为正数,包含0Function(val)
sNum必须为大于0的正数Function(val)
int须为整数Function(val)
pInt须为正整数,包含0Function(val)
sInt须为大于0的整数Function(val)
nInt须为负整数Function(val)
min值不能小于Function(val,minNum)
max值不能大于Function(val,maxNum)
minLen最小长度Function(val,minLen)
maxLen最大长度Function(val,maxLen)
rangeLen长度范围Function(val,minLen,maxLen)
range数值范围, opt[0]-opt[1]:数据范围,opt[3]:不能等于,只能大于 opt[4]:不能等于,只能小于。 例如:0,9999999999,false,falseFunction(val,min,max,minp,maxp)
rangeNum比range 规则多一个小数点位数验证, opt[0]-opt[1]:数据范围,opt[2]:小数位,opt[3]:不能等于,只能大于 opt[4]:不能等于,只能小于。如:0,9999999999.999999,6,false,falseFunction(val,min,max,pos,minp,maxp)
date日期格式如:1980-01-01Function(val)
dataTime日期时间,如:格式如:1980-01-01 12:12Function(val)
dateTimeSecond如:格式如:1980-01-01 12:12:01Function(val)
age年龄验证,0-120的整数Function(val)
mobile需为正确的手机号Function(val)
phone座机电话号码Function(val)
phoneArea需为正确的区号Function(val)
tel普通座机或手机号Function(val)
qqqq号码Function(val)
zipCode邮编Function(val)
ipip地址Function(val)
idCardNo身份证号码Function(val)