rules
soUni 提供了一套 Vue UI 框架中最简洁方便的验证方案。
- 验证规则可以直接预设配置在表单项
item
的rule
属性上,并根据label
信息,自动生成验证提示。如果你不喜欢这样的配置,仍然可以在rules
对象中 用符合async-validator
的方法进行表单验证,都是兼容的。 - 我们可以通过
form
的updateRules
来更新表单项的验证规则。 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-form
的rules
属性和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 | 同req | Function(val) |
len | 字符长度验证 | Function(val,min,max) |
验证电子邮件 | 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 | 必须为正数,包含0 | Function(val) |
sNum | 必须为大于0的正数 | Function(val) |
int | 须为整数 | Function(val) |
pInt | 须为正整数,包含0 | Function(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,false | Function(val,min,max,minp,maxp) |
rangeNum | 比range 规则多一个小数点位数验证, opt[0]-opt[1]:数据范围,opt[2]:小数位,opt[3]:不能等于,只能大于 opt[4]:不能等于,只能小于。如:0,9999999999.999999,6,false,false | Function(val,min,max,pos,minp,maxp) |
date | 日期格式如:1980-01-01 | Function(val) |
dataTime | 日期时间,如:格式如:1980-01-01 12:12 | Function(val) |
dateTimeSecond | 如:格式如:1980-01-01 12:12:01 | Function(val) |
age | 年龄验证,0-120的整数 | Function(val) |
mobile | 需为正确的手机号 | Function(val) |
phone | 座机电话号码 | Function(val) |
phoneArea | 需为正确的区号 | Function(val) |
tel | 普通座机或手机号 | Function(val) |
qq号码 | Function(val) | |
zipCode | 邮编 | Function(val) |
ip | ip地址 | Function(val) |
idCardNo | 身份证号码 | Function(val) |