vue +element UI form表单校验数组嵌套,数组对象必填校验

这篇具有很好参考价值的文章主要介绍了vue +element UI form表单校验数组嵌套,数组对象必填校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用element表单时会出现数组对象类型的数据结构并且需要必填校验

data(){
    return {
         //表单中出现像jsonList这样的数组对象数据
        editForm:{
            script:'',
            paramJsonList:[
                {paramName:'',paramaValue:''}
            ]
        },
        //表单校验
        editFormRule:{
            script:[{required:true,message:'请填写',trigger:'blur'}]
        }
        paramJsonListRules:{
            paramName:[{required:true,message:'请填写',trigger:'blur'}],
            paramaValue:[{required:true,message:'请填写',trigger:'blur'}],
        }
    }
}
  1. 这时数组对象的检验方法就为paramJsonListRules
  2. 注意的是为了实现校验,在需要校验的el-form-item内通过自己的:rules加入对象的校验方法,例如图中想给参数值加校验则直接在相关el-form-item内加入 :rules="paramJsonListRules.paramaValue",就可实现
  3. 对应的prop的键名要与数组对象中键名以及校验方法中的名称保持相同
  4. 注意:prop处写法一定是  :prop="`paramJsonList[${index}].paramValue`"

 表单处代码如下: 

vue +element UI form表单校验数组嵌套,数组对象必填校验文章来源地址https://www.toymoban.com/news/detail-501709.html

到了这里,关于vue +element UI form表单校验数组嵌套,数组对象必填校验的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue + element-ui form rules 校验特殊格式数据(嵌套校验)

     问题描述: ①     需要多层数据嵌套 表单验证失效 ②     表单验证事件  prop 匹配不到数据,value值undefined 。   首先 在页面有一个新增功能  如下图 : 泛化答案数据格式与正常表单验证数据格式不同 (如图):     对象内嵌套 多层嵌套后 校验数组内的值  表单内

    2024年02月08日
    浏览(29)
  • element-ui表单动态添加必填校验

    业务场景:根据form表单中的某些下拉框选中值,动态切换一些属性的必填校验。 效果图: 当活动区域非必填时,活动名称取消必填校验,否则活动名称必填。

    2024年02月11日
    浏览(31)
  • element-ui的el-form表单和el-table校验嵌套使用校验el-input和el-select

    场景:前端开发中,经常会遇到比较多的表单填写页面,其中有el-form,el-table,表格的每一列中又嵌套着输入框或者下拉框,然后每个还需要做单独的校验 效果:   点击保存可校验el-input和el-select是否有值,不符合校验规则就标红提醒   1.el-form里面嵌套el-table 2.在el-table-column自定义内

    2024年02月02日
    浏览(37)
  • element-ui部分表单组件的必填校验问题

    el-date-picker 必填校验 el-cascader 必填校验

    2024年02月12日
    浏览(34)
  • 【vue】element-ui的form数组表单验证(循环表单验证)

    基于 vue2.0 的 element-ui 的 form 表单验证比较简单,但是有些同学可能对于 数组类型 的表单验证无从下手,这里我基于一个我自己项目中的例子,展示一下怎么进行数组的表单验证。 项目截图: 上代码,为了让大家看起来比较清晰,我删掉了无关的代码: 咱们把数组验证的部

    2024年02月07日
    浏览(37)
  • element-ui的form表单校验

    form表单校验基本三步: 1、定义验证规则 在data中定义表单校验规则,一个表单项可定义多条规则,表单项规则用数组,规则为对象,required为必须填写,message为校验提示信息,trigger为校验时机,可选blur和change,分别为失去焦点和数据变化;min/max为最小与最大字符个数,v

    2024年02月11日
    浏览(47)
  • element-ui form表单校验 失败的原因

    1、没有在el-form上指定model 2、el-form-item上的prop名称不对,应当与rules中的名称一致; 3、绑定的属性没有在data中声明; 4、特别重要的一点是ruleForm(数据)和rules(校验规则)里面对应的key一定要相同,一个是数据绑定的值 另外一个是值的规则。

    2024年02月11日
    浏览(30)
  • el-form单个表单项校验方法;element-ui表单单个选项校验;el-form单个表单校验

    当我们使用element-ui的el-form时,想在提交表单前对其中一个表单进行验证时就可以使用element自带的方法“validateField” 如图: 使用示例

    2024年02月16日
    浏览(34)
  • element-ui form表单的动态rules校验

    在vue 项目中,有时候可能会用到element-ui form表单的动态rules校验,比如说选择了哪个选项,然后动态显示或者禁用等等。 我们可以巧妙的运用element-ui form表单里面form-item想的校验规则来处理(每一个form-item项都可以单独校验)。 上代码: 重点是这个: :rules=“sqyxForm.jtpslx

    2024年02月15日
    浏览(32)
  • 【element-ui】form表单动态修改rules校验项

    在项目开发过程中,该页面有暂存和提交两个按钮,其中暂存和提交必填项校验不一样,此时需要动态增减必填项校验 ,解决方法如下: 增加rules校验项 删除rules校验项

    2024年02月04日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包