前情
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-itemlabel="姓名："requiredlabelWidth="auto"borderBottomprop="name"><u--inputv-model="form.name"inputAlign="right"placeholder="请输入"border="none"type="number"></u--input></u-form-item><u-form-itemlabel="手机号码："requiredlabelWidth="auto"borderBottomprop="phone"><u--inputv-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-itemlabel="姓名："requiredlabelWidth="auto"borderBottomprop="name"><u--inputv-model="form.name"inputAlign="right"placeholder="请输入"border="none"type="number"></u--input></u-form-item><u-form-itemlabel="手机号码："requiredlabelWidth="auto"borderBottomprop="phone"><u--inputv-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);},// pattern: /^1\d{10}$/,message: '请输入正确的手机号',trigger: ['blur', 'change']}]}}},mounted() {// 手动提定rulesthis.$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>
