制作线下交易平台网站建设,在线制作图片海腾娱乐,wordpress主题带支付,慕枫网站建设uniapp 多级动态表单添加自定义规则
在uniapp制作小程序时#xff0c;当涉及到需要设置validateFunction的校验规则时。可能遇到的问题
1、validateFunction不生效#xff0c;没有触发 2、多层级表单怎么添加validateFunction自定义校验规则
本文将以单表单校验和多表单校…uniapp 多级动态表单添加自定义规则
在uniapp制作小程序时当涉及到需要设置validateFunction的校验规则时。可能遇到的问题
1、validateFunction不生效没有触发 2、多层级表单怎么添加validateFunction自定义校验规则
本文将以单表单校验和多表单校验分类描述
单表单自定义规则校验
要注意的是
1、去掉rules“rules”,因为表单再校验时validateFunction会不执行 2、本文中photoList是自定义组件主要结构为数组可按照自己的需求填写 3、须在onReady()内设置规则、 templateuni-forms refbaseForm :modelValuebaseFormData label-positionleft label-width150rpxuni-forms-item label现场拍照 required nameimageListphotoList v-modelbaseFormData.imageList limit9/photoList/uni-forms-item/uni-formsu-button classbutton typeprimary shapecircle clicksubmit(baseForm)提交/u-button
/template
script
export default {data() {return {dynamicRules: {imageList: {rules: [{required: true,errorMessage: 最少一张图片}, {validateFunction: (rule, value, data, callback) {// 异步需要返回 Promise 对象return new Promise((resolve, reject) {setTimeout(() {//按照自己的需要填写}, 500)})}}]},}}onReady() {/* 这里我们通过refs拿到增加的内容然后setRules */this.$refs.baseForm.setRules(this.dynamicRules)},methods:{// 提交submit(ref) {this.$refs[ref].validate().then(res {}).catch(err {this.$modal.alert(err[0].errorMessage)})},}
}
/script多层级表单规则校验
要注意的是
1、多层级表单与单层级外部校验相同不同的是需要在新增子项或者原表单中有子项遍历时先渲染后添加规则。 2、给子项uni-from-item组件添加ref用于判断校验位置。
templateuni-forms refbaseForm :modelValuebaseFormData label-positionleft label-width150rpxview v-for(item,index) in baseFormData.inspectionCustodyWorkLogDetailBoList :keyindexuni-forms-item label照片 required :refinspectionCustodyWorkLogDetailBoList-index:rules[{required: true,errorMessage: 检查${index1}图片不能为空}] :name[inspectionCustodyWorkLogDetailBoList,index,imagelist] label-width100rpxview classform-itemphotoListv-modelbaseFormData.inspectionCustodyWorkLogDetailBoList[index].imagelistlimit9/photoList/view/uni-forms-item/view/viewview u-button typeprimary iconplus-square-fill clickadd plain:hairlinefalse新增检查项/u-button/view/uni-formsu-button classbutton typeprimary shapecircle clicksubmit(baseForm)提交/u-button
/template
script
export default {data() {return {baseFormData: {inspectionCustodyWorkLogDetailBoList: [], //检查记录},dynamicRules: {// 基础表单数据imageList: {rules: [{required: true,errorMessage: 最少一张图片}, {validateFunction: (rule, value, data, callback) {// 异步需要返回 Promise 对象return new Promise((resolve, reject) {setTimeout(() {//按照自己的需要填写}, 500)})}}]},}}onReady() {/* 这里我们通过refs拿到增加的内容然后setRules */this.$refs.baseForm.setRules(this.dynamicRules)},methods:{// 选择企业这是在父表单需获取子项时增加company(val) {if (val ! undefined) {// 获取企业必检项这是举例this.mustDeal [{checkContent1,inspectionItemType:1,riskLocation:2},{checkContent1,inspectionItemType:1,riskLocation:2}]//循环获取内容添加至表单中this.mustDeal.forEach((item, index) {this.baseFormData.inspectionCustodyWorkLogDetailBoList.push({checkContent: item.checkContent,images: null,inspectionItemType: item.inspectionItemType,riskLocation: item.riskLocation,id: Date.now(),imagelist: [],isPass: null, //是否合格isMustCheck: 1,})})/* 这里我们通过refs拿到增加的内容然后setRules */this.$nextTick(() {/* 用nextTick是让界面先渲染 *//* 根据html中的ref规则获取到uni-forms-item */this.baseFormData.inspectionCustodyWorkLogDetailBoList.forEach((ite, inde) {// // rules[imagelist]this.dynamicRules.imagelist.ruleslet $Item this.$refs[inspectionCustodyWorkLogDetailBoList- inde];/* 对这个uni-forms-item主动setRules *//* 这里直接设置的是对应字段的rules */$Item[0].setRules(this.dynamicRules.imagelist.rules);})})} },// 新增检查项add() {this.baseFormData.inspectionCustodyWorkLogDetailBoList.push({checkContent: null,images: null,id: Date.now(),imagelist: [],isPass: null, //是否合格isMustCheck: 0, //非必检})/* 这里我们通过refs拿到增加的内容然后setRules */this.$nextTick(() {/* 用nextTick是让界面先渲染 *//* 根据html中的ref规则获取到uni-forms-item */let $Item this.$refs[inspectionCustodyWorkLogDetailBoList- (this.baseFormData.inspectionCustodyWorkLogDetailBoList.length - 1)];/* 对这个uni-forms-item主动setRules *//* 这里直接设置的是对应字段的rules */$Item[0].setRules(this.dynamicRules.imagelist.rules);});},// 提交submit(ref) {this.$refs[ref].validate().then(res {}).catch(err {//输出报错信息this.$modal.alert(err[0].errorMessage)})},}
}
/script以上是本人工作中为解决问题使用不足之处还望指出。
