element form表单校验问题

问题
在使用element form表单时,表格表单,表格如下:
表格表单
校验规则如下

<el-form-item :rules="activityVoList.checkedServerList" :prop="'activityVoList.' + scope.$index + '.checkedServerList'" label-width="0">
                            <el-checkbox-group v-model="scope.row.checkedServerList">
                                <el-checkbox v-for="item in service[scope.$index]" :key="item.service_name" :label="item.service_name" @change="handleChange">{{ item.service_name }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>



activityVoList:{
                    checkedServerList:[
                        { type: 'array', required: true, message: '请至少选择一项服务', trigger: 'change' },
                        {validator:validatecheck,trigger: 'change'}
                    ],
                },

const validatecheck=(rule,value,callback)=>{
                debugger
                console.log(rule)
                console.log(value)
                callback();
            }

但是这样写,进不了校验规则方法,按以下修改后,可以进校验规则方法:

<el-form-item
                                :rules="[
                                    {type:'array',validator:(rule,value,callback)=>{validCheckedServer(rule,value,callback)} , trigger: 'change' },
                                ]"
                                :prop="'activityVoList.' + scope.$index + '.checkedServerList'" label-width="0">
                            <el-checkbox-group v-model="scope.row.checkedServerList">
                                <el-checkbox v-for="item in service[scope.$index]" :key="item.service_name" :label="item.service_name" @change="handleChange">{{ item.service_name }}</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>

这样修改后可以进校验规则方法,但是取到的’value’值为undefined,
没找到原因,无奈只能手动取到需要校验的值,然后进行校验,

element form表单校验是一种常用的前端表单校验方式,可以有效地对表单输入的内容进行验证,提高用户输入的准确性和数据的有效性。下面是element form表单校验的行内写法的解释。 Element form表单校验的行内写法主要是通过在input标签上添加相关属性来定义校验规则,实现对表单输入的校验。其中常用的属性包括:required、pattern、min、max、minlength、maxlength、type等。 首先,我们需要在input标签上添加required属性,用于设置必填项的校验规则。这样可以确保用户必须填写该字段,否则会弹出错误提示。 其次,我们可以使用pattern属性,通过正则表达式来定义输入内容的格式。例如,pattern="[a-zA-Z0-9]+"表示输入内容只能包含字母和数字。 另外,我们还可以使用min和max属性,用于限制输入的最小值和最大值。例如,min="1"和max="100"表示输入内容必须在1到100之间。 此外,如果我们需要限制输入内容的长度,可以使用minlength和maxlength属性。例如,minlength="6"和maxlength="12"表示输入内容的长度必须在6到12个字符之间。 最后,type属性可以用来指定输入内容的类型,例如email、tel、url等。这样可以对不同类型的输入进行相应的校验。 总的来说,element form表单校验的行内写法通过在input标签上添加相关属性,实现对表单输入的校验。这种写法简单方便,适用于表单校验需求简单的场景。但对于复杂的校验规则,建议使用element form表单校验的自定义写法,通过js代码来实现更灵活的校验逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值