最近几次使用发现有时候会不生效,具体还没排查出来什么原因,先记录一下解决使用方法
html
<u--form
labelPosition="top"
labelWidth="auto"
:model="form"
:rules="rules"
ref="uForm"
>
<view class="form-item">
<view class="form-remark">
<u-form-item
label="反馈与建议"
prop="contents"
:borderBottom="false"
:required="true"
ref="item1"
>
<u--textarea
v-model="form.contents"
placeholder="您填写的信息越全,问题越可有效解决哦~"
:count="true"
maxlength="300"
border="none"
disableDefaultPadding="true"
:placeholderStyle="{'fontSize':'28rpx;'}"
></u--textarea>
</u-form-item>
</view>
</view>
<view class="form-item">
<view class="form-remark">
<u-form-item
label="手机号"
labelPosition="left"
prop="phonenumber"
:borderBottom="false"
ref="item1"
>
<u-input
placeholder="请输入手机号"
border="none"
v-model="form.phonenumber"
:customStyle="{
'line-height':'100rpx',
'padding-bottom':'5px'
}"
color="#666"
fontSize="14"
></u-input>
</u-form-item>
</view>
</view>
</u--form>
js
<script>
export default {
data() {
return {
form:{
contents: null, // 备注
phonenumber: null,
url: ''
},
rules: {
'contents': {
required: true,
message: '请填写描述信息',
trigger: ['blur', 'change']
},
'phonenumber': {
required: true,
validator: (rule, value, callback) => {
// 上面有说,返回true表示校验通过,返回false表示不通过
return uni.$u.test.mobile(value);
},
message: '手机号码格式不正确',
// 触发器可以同时用blur和change
trigger: 'change',
},
},
}
},
onReady() {
//如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规则。
this.$refs.uForm.setRules(this.rules)
},
}
</script>
需要注意的是(有待验证):
- 如果需要兼容微信小程序,并且校验规则中含有方法等,只能通过setRules方法设置规 this.$refs.uForm.setRules(this.rules),如果是页面就写在onReady 里,如果是组件需要写在mounted
- prop 用contents可以正确校验,用form.contents好像不能正确校验