使用了官方的例子,填写了rules然后点击提交时不触发校验,然后页面样式设置了必填的也不能显示红色的星星。
<template>
<view class="custom-filed-page">
<uni-forms :modelValue="formData" ref="form" :rules="rules">
<uni-forms-item v-for="(item, index) in customerFields" :key="index" :label="item.title" :name="item.name">
<uni-easyinput
v-if="item.content_type == 'text'"
type="text"
v-model="formData[item.name]"
placeholder="请输入"
:disabled="canChange"
placeholderStyle="color:rgba(0, 0, 0, 0.45)"
/>
<view v-else-if="item.content_type == 'verify'">
<uni-easyinput type="text" v-model="formData[item.name]" placeholder="请输入" :disabled="canChange" placeholderStyle="color:rgba(0, 0, 0, 0.45)" />
<view style="position:relative;" @click="getVerifyCode">
<image style="width:160rpx;height:70rpx;position:absolute;right:0rpx;bottom:0rpx;text-align: center;z-index:9999;" :src="validCodeUrl" />
</view>
</view>
<view v-else-if="item.content_type == 'radio'"></view>
<view v-else-if="item.content_type == 'area_text'"></view>
<uni-easyinput
v-else-if="item.content_type == 'link'"
type="text"
v-model="formData[item.name]"
placeholder="请输入"
:disabled="canChange"
placeholderStyle="color:rgba(0, 0, 0, 0.45)"
/>
<view v-else-if="item.content_type == 'droplist'"></view>
<view v-else-if="item.content_type == 'date'"></view>
<view v-else-if="item.content_type == 'time'"></view>
<view v-else-if="item.content_type == 'datetime'"></view>
<view v-else-if="item.content_type == 'number'"></view>
<view v-else-if="item.content_type == 'numeric'"></view>
<view v-else-if="item.content_type == 'checkbox'"></view>
<view v-else-if="item.content_type == 'chained_droplist'"></view>
<view v-else-if="item.content_type == 'calculate'"></view>
</uni-forms-item>
</uni-forms>
<button v-if="!canChange" class="weui-btn" type="primary" @click="submitForm">确定</button>
</view>
</template>
{
"nick_name": {
"rules": [
{
"required": true,
"errorMessage": "姓名是必选项"
}
]
},
"email": {
"rules": [
{
"required": true,
"errorMessage": "邮箱是必选项"
}
]
},
"cellphone": {
"rules": [
{
"required": true,
"errorMessage": "手机号是必选项"
}
]
},
"validateCode": {
"rules": [
{
"required": true,
"errorMessage": "验证码是必选项"
}
]
}
}