uView ui表单支持深对象和数组校验(记录)
编辑
1075
2022-05-12
由于uView ui 1.0版本在设计之初,没有考虑深度对象和数组的校验,且现在刚好遇到需要该场景,故做以下记录:
第一步:修改组件源码
1. 在props
中增加以下代码:
props:{
target:{
type:Object
},
// 省略其他代码...
}
2. 在methods
新增一个方法,方法名为getFieldValue
getFieldValue(){
const fileds =this.prop.split('.')
const value = fileds.reduce((pre,cur)=>{
return pre && pre[cur]
},this.parent.model)
return value
},
3. 找到u-form-item
组件源码,大概在 276行的位置,注释掉 this.fieldValue = this.parent.model[this.prop];
改为以下代码:
validation(trigger, callback = () => {}) {
// 检验之间,先获取需要校验的值
// this.fieldValue = this.parent.model[this.prop];
if (this.target) {
this.fieldValue = this.target[this.prop];
} else {
this.fieldValue = this.getFieldValue()
// this.fieldValue = this.parent.model[this.prop];
}
// 省略其他源码...
}
第二步、实现校验
针对于嵌套对象校验,代码如下:
<u-form :model="form" ref="uForm" :errorType="['toast', 'message']" label-width="120rpx">
<u-form-item label="用户名" prop="username" required><u-input v-model="form.username" /></u-form-item>
<u-form-item label="简介" prop="intro" required><u-input v-model="form.intro" /></u-form-item>
<u-form-item label="欢迎" prop="obj.hello" required><u-input v-model="form.obj.hello" /></u-form-item>
</u-form>
data() {
return {
form: {
username: '',
intro: '',
obj: {
hello: ''
}
},
rules: {
username: [
{
required: true,
message: '请输入用户名',
// 可以单个或者同时写两个触发验证方式
trigger: ['change', 'blur']
}
],
'obj.hello': [
{
required: true,
message: '请输入欢迎信息',
// 可以单个或者同时写两个触发验证方式
trigger: ['change', 'blur']
}
]
}
},
},
针对于数组对象校验,代码如下:
<u-form :model="form" ref="uForm" :errorType="['toast', 'message']" label-width="120rpx">
<u-form-item label="用户名" prop="username" required><u-input v-model="form.username" /></u-form-item>
<view class="list" v-for="(item, index) in form.list" :key="index">
<view class="" style="margin-top: 30rpx;margin-bottom: 15rpx;font-weight: bold;color: #ff80ab;">
第{{ index + 1 }}项
</view>
<!--注意:此处需要多加target="item" -->
<u-form-item label="姓名" prop="name" :target="item" required><u-input v-model="item.name" /></u-form-item>
<u-form-item label="描述" prop="desc" :target="item" required><u-input v-model="item.desc" /></u-form-item>
</view>
</u-form>
data() {
return {
form: {
username: '',
intro: '',
list: [
{
name: '',
desc: ''
},
{
name: '',
desc: ''
}
]
},
rules: {
username: [
{
required: true,
message: '请输入用户名',
// 可以单个或者同时写两个触发验证方式
trigger: ['change', 'blur']
}
],
name: [
{
required: true,
message: '请输入姓名',
// 可以单个或者同时写两个触发验证方式
trigger: ['change', 'blur']
}
]
}
},
},
至此,对于深对象和数组的校验就已经可以支持了,如果有什么不对的地方或者更好的方法,欢迎大佬评论留言指出。
- 11
- 0
-
赞助
微信支付微信赞赏QQ赞赏支付宝赞赏 -
分享