Vue 验证数组
干后端干前端干啥啥都行,经常遇到附件上传,或者有需要验证数组的情况,想要使用原生rules保持界面的干净,然后老老实实看了下vue是如何自定义验证规则。然后封装一个验证规则,以后好用。方法一、简单处理版本,直接使用rules自带的,但是有点小bug,F12时候会有异常,想图快的将就用吧1.1需要验证的数组字段加规则ruleupFileList: [{required: true,message:
经常遇到附件上传,或者有需要验证数组的情况,想要使用原生rules保持界面的干净,然后老老实实看了下vue是如何自定义验证规则。然后封装一个验证规则,以后好用。
方法一、简单处理版本,直接使用rules自带的,但是有点小bug,F12时候会有异常,想图快的将就用吧
1.1需要验证的数组字段加规则rule
upFileList: [
{
required: true,
message: '注意:请上传附件',
type: 'array'
},
{
message: '注意:最多上传5个附件',
type: 'array',
min: 1,
max: 5
}
]
1.2需要验证的字段,根据需要使用隐藏域
<FormItem prop="rectifyOrgId">
<Input v-model="objectItem.upFileList" style="display: none;" />
</FormItem>
方法二、自定义验证器,思路是利用Json工具将数组转字符串,因为直接用array类型的不会触发校验
2.1、自定义校验类型
export const validateArray = (rule, value, callback) => {
let filedName = ''
let message = ''
let minMessage = ''
let maxMessage = ''
debugger
if (value === undefined || value === null || value === '') {
value = '[]'
}
value = JSON.parse(value)
if (typeof rule.message !== 'undefined' && rule.message !== '') {
message = rule.message
} else {
if (typeof rule.filedName !== 'undefined' && rule.filedName !== '') {
filedName = rule.filedName
} else {
filedName = '该字段'
}
}
if (typeof rule.maxMessage !== 'undefined' && rule.maxMessage !== '') {
maxMessage = rule.maxMessage
}
if (typeof rule.minMessage !== 'undefined' && rule.minMessage !== '') {
minMessage = rule.minMessage
}
if (rule.required === false) {
if (value.length === 0) {
callback()
}
} else {
if (value.length === 0) {
if (message) {
callback(new Error(message))
} else {
callback(new Error('注意:请填写' + filedName))
}
} else {
if (typeof rule.min !== 'undefined' && rule.min !== '' && typeof rule.min === 'number') {
if (value.length < rule.min) {
if (minMessage) {
callback(new Error(minMessage))
} else {
callback(new Error('注意:输长度不能小于' + rule.min))
}
}
}
if (typeof rule.max !== 'undefined' && rule.max !== '' && typeof rule.max === 'number') {
if (value.length > rule.max) {
if (maxMessage) {
callback(new Error(maxMessage))
} else {
callback(new Error('注意:长度不能大于' + rule.min))
}
}
}
callback()
}
}
}
2.2、需要校验的字段加规则
usscUpListStr: [
{
validator: validateArray,
required: true,
message: '注意:请上传统一社会信用代码照片'
},
{
validator: validateArray,
minMessage: '注意:上传的数量不能小于1', // 自定义属性,这里不要用message,不然会被覆盖掉
maxMessage: '注意:上传的数量不能大于于2',
min: 1,
max: 1
}
]
2.3、需要校验的字段list加入数据时候,单独转下string类型
<td rowspan="4">
<EpPicUploader
ref="usscImg"
:target="target"
:single-img="true"
:get-img-api="getImgApi"
:del-url-path="delUrlPath"
:file-status-text="statusText"
:attrs-img="attrsImg"
:max-size="maxSize"
:up-list-default="usscUpList"
:biz-id="bizId"
@file-complete="fileComplete"
@file-success="fileSuccess"
@complete="complete"
@removeBefore="removeBefore"
@fileRemovedComplete="fileRemovedComplete"
@fileRemovedSuccess="fileRemovedSuccess"
@fileRemovedError="fileRemovedError"
/>
<FormItem prop="usscUpListStr">
<Input v-model="machManageObj.vehMachRegInfo.usscUpListStr" style="display: none;" />
</FormItem>
</td>
<Select v-model="formData.riverBasin" multiple @on-change="onRiverBasinSelect">
<Option v-for="item in riverBasinList" :value="item.value" :key="item.value">{{ item.label }}
</Option>
</Select>
<FormItem prop="riverBasinListStr">
<Input v-model="formData.riverBasinListStr" style="display: none;"/>
</FormItem>
this.machManageObj.vehMachRegInfo.usscUpListStr = JSON.stringify(list)
大概效果图如下,可以支持最大最小值校验。
更多推荐
所有评论(0)