Form 表单 | uView - 多平台快速开发的UI框架 - uni-app UI框架
官网例子
rules: {
name: [
// 必填规则
{
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 uni.$(value, "A");
},
message: '必须包含字母"A"'
},
// 校验用户是否已存在
{
asyncValidator: (rule, value, callback) => {
uni.$('/xxx/xxx', {name: value}).then(res => {
// 如果验证不通过,需要在callback()抛出new Error('错误提示信息')
if() {
callback(new Error('姓名重复'));
} else {
// 如果校验通过,也要执行callback()回调
callback();
}
})
},
// 如果是异步校验,无需写message属性,错误的信息通过Error抛出即可
// message: 'xxx'
}
]
}
编写完了之后发现正则这块不生效
是因为不兼容,如果需要兼容小程序
需要加上
this.$refs.$()
即可解决
如果校验还没生效请检查标签是否填入必要的属性
<u--form ref="$form" labelPosition="left" :model="form" labelWidth="140rpx" :rules="rules">
<u-form-item label="姓名" prop="name">
<u--input v-model="" placeholder="请输入姓名"></u--input>
</u-form-item>
</u--form>