前情
uni-app是我比较喜欢的跨平台框架，它能开发小程序/H5/APP(安卓/iOS)，重要的是对前端开发友好，自带的IDE让开发体验非常棒，公司项目就是主推uni-app，在uniapp生态中uView是其中非常好的全平台的第三方开源ui库，我在公司项目中果断的使用了它。
坑位
在用uView做小程序表单验证的时候，对于普通的验证是没有问题，如果要用到正则或者自定义验证方法，发现在小程序不生效。
Why?
是自己大意了没有闪，没细看官方文挡，官方文挡在Form表单文挡最开头就强调了，微信小程序要特殊处理，对于使用正则也是不行，有可能是用了正则就是走的自定义验证方法了吧。
解决方案
在小程序中，使用uView的表单验证如果你使用了正则验证或者自定义验证方法验证，那就不能通过:rules给form组件传验证规则，只能通过setRules(rules)手动指定form的验证规则才行。
不需要手动指定验证规则：
<template>
<view class="page-container">
<u-form
:model="form"
:rules="rules"
ref="addressForm"
>
<view class="form-wrap">
<u-form-item
label="姓名："
required
labelWidth="auto"
borderBottom
prop="name"
>
<u--input
v-model="form.name"
inputAlign="right"
placeholder="请输入"
border="none"
type="number"
></u--input>
</u-form-item>
<u-form-item
label="手机号码："
required
labelWidth="auto"
borderBottom
prop="phone"
>
<u--input
v-model="form.phone"
inputAlign="right"
placeholder="请输入"
border="none"
type="number"
></u--input>
</u-form-item>
</view>
</u-form>
<button @click="submit">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
phone: '',
},
rules: {
name: [
{
required: true,
message: '请输入联系人姓名',
trigger: ['blur', 'change']
}
],
phone: [
{
required: true,
message: '请输入手机号码',
trigger: ['blur', 'change']
}
]
}
}
},
methods: {
submit() {
this.$refs.addressForm.validate().then(res => {
uni.$u.toast('校验通过');
}).catch(errors => {
uni.$u.toast('校验失败');
})
}
}
}
</script>
<style lang="scss" scoped>
.form-wrap{
padding:0 32rpx 40rpx 32rpx;
::v-deep{
.u-form-item__body__left__content__label{
font-size: 32rpx!important;
color: #111111;
}
.u-form-item__body{
padding: 32rpx 0;
}
.input-placeholder{
text-align: right;
}
.u-input__content__field-wrapper{
margin-right: 4px;
}
}
}
</style>
需要手动指定验证规则，因为姓名使用了pattern/手机又使用了自定义的验证方法：
<template>
<view class="page-container">
<u-form
:model="form"
ref="addressForm"
>
<view class="form-wrap">
<u-form-item
label="姓名："
required
labelWidth="auto"
borderBottom
prop="name"
>
<u--input
v-model="form.name"
inputAlign="right"
placeholder="请输入"
border="none"
type="number"
></u--input>
</u-form-item>
<u-form-item
label="手机号码："
required
labelWidth="auto"
borderBottom
prop="phone"
>
<u--input
v-model="form.phone"
inputAlign="right"
placeholder="请输入"
border="none"
type="number"
></u--input>
</u-form-item>
</view>
</u-form>
<button @click="submit">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
phone: '',
},
rules: {
name: [
{
required: true,
message: '请输入联系人姓名',
trigger: ['blur', 'change']
},
// 正则判断
{
pattern: /^[\u4e00-\u9fa5]+$/g,
// 正则检验前先将值转为字符串
transform(value) {
return String(value);
},
message: '只能包含字母或数字'
},
],
phone: [
{
required: true,
message: '请输入手机号码',
trigger: ['blur', 'change']
}, {
validator: (rule, value, callback) => {
return uni.$u.test.mobile(value);
},
message: '请输入正确的手机号',
trigger: ['blur', 'change']
}
]
}
}
},
mounted() {
// 手动提定rules
this.$refs.addressForm.setRules(this.rules);
},
methods: {
submit() {
this.$refs.addressForm.validate().then(res => {
uni.$u.toast('校验通过');
}).catch(errors => {
uni.$u.toast('校验失败');
})
}
}
}
</script>
<style lang="scss" scoped>
.form-wrap{
padding:0 32rpx 40rpx 32rpx;
::v-deep{
.u-form-item__body__left__content__label{
font-size: 32rpx!important;
color: #111111;
}
.u-form-item__body{
padding: 32rpx 0;
}
.input-placeholder{
text-align: right;
}
.u-input__content__field-wrapper{
margin-right: 4px;
}
}
}
</style>
