站长之家ping检测,opkg 安装wordpress,个人网站名可以和别人一样吗,搜索引擎大全排行场景#xff1a;本文是两种表单校验 1.对于数组for循环#xff0c;校验每一项 2.对于两个不同的字段#xff0c;分别v-if显示隐藏的校验 一、新增和删除表单项#xff0c;动态校验。 el-form表单动态动态新增表单进行校验。直接参考 动态增减表单项 以下代码可直接复制本文是两种表单校验 1.对于数组for循环校验每一项 2.对于两个不同的字段分别v-if显示隐藏的校验 一、新增和删除表单项动态校验。 el-form表单动态动态新增表单进行校验。直接参考 动态增减表单项 以下代码可直接复制重点在于:prop :rules :key
templatedivel-form :modeldynamicValidateForm refdynamicValidateForm label-width110px classdemo-dynamicdiv classbor_box v-for(domain, index) in dynamicValidateForm.premiumList :keydomain.keyel-col :span24div classbox4_divel-col :span5el-form-item label保费 :proppremiumList. index .premium :rules{required: true, message: 保费不能为空, trigger: blur}el-input classnum_input placeholder请输入 v-modeldomain.premium/el-input/el-form-item/el-colel-col :span5el-form-item label保费率 :proppremiumList. index .rate :rules{required: true, message: 保费率不能为空, trigger: blur}el-input classnum_input placeholder请输入 :precision2 :step0.01 v-modeldomain.rate/el-input/el-form-item/el-colel-col :span5el-form-item label上游费用率 :proppremiumList. index .feeRate :rules{required: true, message: 上游费用率不能为空, trigger: blur}el-input classnum_input placeholder请输入 :max100 v-modeldomain.feeRate/el-input/el-form-item/el-colel-col :span5el-form-item label上游费用额 :proppremiumList. index .fee :rules{required: true, message: 上游费用额不能为空, trigger: blur}el-input classnum_input placeholder请输入 v-modeldomain.fee/el-input/el-form-item/el-colel-col :span4el-button click.preventremoveDomain(domain,index)删除/el-button/el-col/div/el-col/divdivel-form-itemel-button typeprimary clicksubmitForm(dynamicValidateForm)提交/el-buttonel-button clickaddDomain添加保费/el-buttonel-button clickresetForm(dynamicValidateForm)重置/el-button/el-form-item/div/el-form/div
/templatescript
export default {data () {return {dynamicValidateForm: {premiumList: [{selected: Y, premium: undefined, rate: undefined, feeRate: undefined, fee: undefined, baofei1_unit: , shangyoufeiyonge_unit: , downRate: undefined, downFee: undefined, xiayoufeiyonge_unit: ,}],},}},created () {},methods: {submitForm (formName) {this.$refs[formName].validate((valid) {if (valid) {alert(submit!)} else {console.log(error submit!!)return false}})},resetForm (formName) {this.$refs[formName].resetFields()},removeDomain (item, index) {if (index ! 0) {this.dynamicValidateForm.premiumList.splice(index, 1)}},addDomain () {this.dynamicValidateForm.premiumList.push({selected: N, premium: undefined, rate: undefined, feeRate: undefined, fee: undefined, baofei1_unit: , shangyoufeiyonge_unit: , downRate: undefined, downFee: undefined, xiayoufeiyonge_unit: ,key: Date.now()})},},
}
/scriptstyle langless scoped
.bor_box {margin-left: 50px;margin-bottom: 10px;overflow: hidden;
}
/style二、el-form表单校验v-if不生效、el-form表单校验v-show不生效 例如有个表单项通过控制显示两个不同的表单项内容分别需要校验对应的表单项即可。 如果是直接用v-if会发现切换时候校验不生效 如果直接使用v-show又发现即使不切换隐藏了另外的表单项也会触发校验规则。 正确做法是使用v-if控制表单项的显示隐藏同时需要给el-form-item加上自己的 prop 和 key 这样才能区分。当然:rules 也要有自己对应的提示。 template v-ifflagel-form-item label姓名 propname keyname :rulesrules.nameel-input v-modelformData.name placeholder/el-input/el-form-item/templatetemplate v-elseel-form-item label退回原因 propdesc keydesc :rulesrules.descel-input typetextarea maxlength500 show-word-limit v-modelformData.desc placeholder请填写退回原因/el-input/el-form-item/template