<template>
<view>
<view class="insureUser">
<uni-forms ref="insureUserForm" :modelValue="user.insureUser" :rules="rules">
<uni-forms-item label="投保人姓名" required>
<uni-easyinput :inputBorder="false" class="textright"
v-model="user.insureUser.CUST_NAME" placeholder="请输入姓名" />
</uni-forms-item>
<uni-forms-item label="证件号码" name="ID_NO" required>
<uni-easyinput :inputBorder="false" class="textright"
v-model="user.insureUser.ID_NO" placeholder="请输入证件号码" />
</uni-forms-item>
<uni-forms-item label="性别" required>
<uni-data-checkbox class="textright" v-model="user.insureUser.GENDER"
:localdata="genderList" ></uni-data-checkbox>
</uni-forms-item>
<uni-forms-item label="出生日期" required>
<uni-easyinput :inputBorder="false" class="textright"
v-model="user.insureUser.BIRTHDAY" placeholder="请输入出生日期" />
</uni-forms-item>
<uni-forms-item label="手机号码" required>
<uni-easyinput :inputBorder="false" class="textright"
v-model="user.insureUser.MOBILE" placeholder="请输入手机号码" />
</uni-forms-item>
<uni-forms-item label="电子邮箱" name="EMAIL">
<uni-easyinput :inputBorder="false" class="textright" v-model="user.insureUser.EMAIL"
placeholder="用于接收电子保单" />
</uni-forms-item>
<uni-forms-item required label="工作单位" name="JOB_WK_PLACE">
<uni-easyinput :inputBorder="false" class="textright"
maxlength="20" v-model="user.insureUser.JOB_WK_PLACE" placeholder="请输入工作单位" />
</uni-forms-item>
<uni-forms-item required label="工作内容描述" name="JOB_DESCRP">
<uni-easyinput :inputBorder="false" class="textright"
maxlength="20" v-model="user.insureUser.JOB_DESCRP" placeholder="请输入工作内容描述" />
</uni-forms-item>
</uni-forms>
<button type="primary" @click="submitrrr('insureUserForm')">提交</button>
</view>
</view>
</template>
<script>
import code from '@/common/code.js'
import common from '@/common/common.js';
export default {
data() {
return {
isReadOnly: false, //input控件是否只读
user: { // 投保人信息
insureState: {
userType: '', //用户角色(为了给职享安康产品使用)
insureUserType: '0',
insureUserShow: true
},
insureUser: new code.userSupplement(),
},
genderList: [{
text: '男',
value: '1',
}, {
text: '女',
value: '2',
}],
childList: [{
text: '未育',
value: '0'
}, {
text: '已育',
value: '1'
}],
rules: { // 校验规则
// 对name字段进行必填验证
ID_NO: {
rules: [{
required: true,
errorMessage: '请输入证件号码',
}, {
validateFunction: function(rule, value, data, callback) {
let msg = common.idtpCheckMsg(data.ID_TYPE, value, data.BIRTHDAY, data.GENDER);
if (msg) {
callback(msg);
}
return true
}
}],
},
// 对email字段进行必填验证
EMAIL: {
rules: [{
format: 'email',
errorMessage: '域名格式错误'
}],
},
JOB_WK_PLACE: {
rules: [{
required: true,
errorMessage: '请输入工作单位',
}, {
validateFunction: function(rule, value, data, callback) {
if (!common.isWordSpace(value)) {
callback('不能含有特殊字符,或者不少于2个字不大于20个字');
}
return true
}
}],
},
JOB_DESCRP: {
rules: [{
required: true,
errorMessage: '请输入工作内容描述',
}, {
validateFunction: function(rule, value, data, callback) {
if (!common.isJobDescrp(value)) {
callback('只能输入2至20个中文汉字');
}
return true
}
}],
},
}
}
},
onReady() {
let that = this;
// 需要在onReady中设置规则
that.$refs.insureUserForm.setRules(that.rules);
},
methods: {
submitrrr(ref) {
this.$refs[ref].validate().then(res => {
console.log('success', res);
uni.showToast({
title: `校验通过`
})
}).catch(err => {
console.log('err', err);
})
},
}
}
</script>
cathayIT (作者)
嗯 解决了,你把你需要做表单的这块,单独做个demo测试,这样比较容易看出问题。
2022-06-23 10:55