el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)

这篇具有很好参考价值的文章主要介绍了el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

el-form表单动态校验

el-form常规校验方式:

// 结构部分
<el-form ref="form" :model="form" :rules="rules">
	<el-form-item label="活动名称: " prop="name" required>
       <el-input v-model="form.name" />
    </el-form-item>
</el-form>

// script部分
<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        name: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    }
  }
}

save() {
    this.$refs.form.validate((valid) => {
        if (valid) {
        	console.log('通过表单校验')
        }
    })
}

正题部分-表单动态校验
场景: 输入框根据单选项来动态校验表单
没有选中的选项就不用校验
el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验),vue.js,javascript,前端,elementui
效果: el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验),vue.js,javascript,前端,elementui

<el-form ref="form" :model="form" :rules="rules">
	<el-form-item label="跳转类型: " prop="skipType" required>
        <el-radio-group v-model="form.skipType"">
          <el-radio :label="0" style="display: block; margin: 10px 0">无跳转</el-radio>
          <div>
            <el-radio :label="1" style="display: inline-block; margin: 11px 0">小程序内页</el-radio>
            <el-form-item
              label=""
              label-width="0"
              style="display: inline-block; height:20px"
              prop="insidePage"
              :rules="form.skipType === 1 ? rules.insidePage : []"
              :required="form.skipType === 1"
            >
              <!-- :rules="[{ required: true, message: '请输入小程序页面路径', trigger: 'blur' }]" -->
              <el-input
                v-model.trim="form.insidePage"
                placeholder="输入小程序页面路径"
                autocomplete="off"
                maxlength="20"
                style="width: 160px; margin-left: 10px"
              />
            </el-form-item>
          </div>
          <div>
            <el-radio :label="2" style="display: inline-block; margin: 11px 0 14px">外部小程序</el-radio>
            <el-form-item
              label=""
              label-width="0"
              style="display: inline-block"
              prop="outsideAppId"
              :rules="form.skipType === 2 ? rules.outsideAppId : []"
              :required="form.skipType === 2"
            >
              <el-input
                v-model.trim="form.outsideAppId"
                placeholder="输入小程序APPID"
                autocomplete="off"
                maxlength="20"
                style="width: 160px; margin-left: 10px"
              />
            </el-form-item>
         </div>
      </el-radio-group>
   </el-form-item>
</el-form>

// script部分
<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        skipType: [{ required: true, message: '请选择跳转类型', trigger: 'change' }],
        insidePage: [{ required: true, message: '请输入小程序页面路径', trigger: 'blur' }],
        outsideAppId: [{ required: true, message: '请输入小程序appid', trigger: 'blur' }]
      }
    }
  }
}

save() {
    this.$refs.form.validate((valid) => {
        if (valid) {
        	console.log('通过表单校验')
        }
    })
}

关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件文章来源地址https://www.toymoban.com/news/detail-704667.html

:rules="form.skipType === 1 ? rules.insidePage : []"
:required="form.skipType === 1" 

到了这里,关于el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue实现多个el-form表单提交统一校验

    通过以下两种方法实现多个表单的统一校验: 1. 定义模板内容 在 el-form 表单中添加 ref 属性来获取表单组件对象 2. 方法一 在上述代码中,我们给每个 el-form 表单添加了 ref 属性,分别为 form1 和 form2,在 submit 方法中,分别对两个表单使用 validate 方法进行表单校验 3. 方法二

    2024年02月13日
    浏览(44)
  • Vue - Element el-form 表单对象多层嵌套校验

    针对el-form的数据源是对象嵌套对象,在进行数据绑定和校验时和单层的对象有一点区别, 具体是下面两部分: 数据源: 1、 给 el-form-item 的 prop 设为: prop=\\\"health.height\\\" 。 v-model 设为: v-model=\\\"fromData.health.height\\\" 2、校验规则 rules 对象对应的key设置为数据源内部的值: \\\'health.heig

    2024年02月14日
    浏览(50)
  • el-form表单全部/部分添加一样字段内容并表单校验(复制即可实现)

    需求:表单有俩个按钮,一个是全部添加,一个是部分添加默认如下:  点击添加饮品爱好后如下,可以添加多个 点击添加全部,并且点击提交按钮后的表单校验,如下图:  全部代码如下,可自行复制查看  得到的数据结构如下图,不会影响,都是单独的表单验证:  这样

    2024年02月08日
    浏览(40)
  • 解决el-form一进页面就会触发表单校验问题

    预期效果是:打开页面,外出地点和其他属性一样,不会自动触发表单非空校验,而是在操作当前属性时触发。 解决思路: 设置初始值为空数组即可 若不是多选,是输入框或者其他就初始化对应的值即可。思路大概是这样~

    2024年02月16日
    浏览(51)
  • el-form表单中不同数据类型对应的时间格式化和校验规则

     1. 在表单中, 当选择不同的数据类型时, 需要在下面选择时间时和数据类型对应上, 通过监听数据类型的变化, 给时间做格式化, 2. 但是当不按顺序选择数据类型后, 再选时间可能会报错, 所以需要在dom更新后, 再清空表单. 3. 校验规则, 结束时间需要大于开始时间, 但是不能选当

    2024年02月09日
    浏览(48)
  • (el-Form)操作(不使用 ts):Element-plus 中 Form 表单组件校验规则等的使用

    1、 Element-plus 提供 Form 表单组件情况: 其一、 Element-plus 自提供的 Form 代码情况为(示例的代码): 代码地址( 直接点击下面 url 跳转 ):https://element-plus.gitee.io/zh-CN/component/form.html#自定义校验规则 其二、页面的显示情况为: 2、目标想修改后的情况: // 此时虽然页面的样式有些变

    2024年02月13日
    浏览(50)
  • 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日
    浏览(48)
  • el-form 动态表单增减项 (vue+element ui)

    1、点击”+“,弹出弹窗,新增一项,点击”-“,删除当前项 代码展示: html代码: 注意: el-form-item(表单项)循环,绑定的数组写在form当中 表单: 新增参数弹框: data: methods: 1、点击新增,弹出新增弹窗,添加表单项 2、点击”-“,删除当前表单项

    2024年02月02日
    浏览(45)
  • Vue+Element-UI el-form表单动态检验

    业务需求: 表单el-form 有一表单项:发布时间 ,有5个选项:今天、24小时、近3天、近7天和自定义时间,其中当选择自定义时间时,后面跟着的日期时间选择器是必填的,选中其他选项时则不需要。这就需要做到表单的动态检验。 最开始实现方式是在当前表单项中设置规则

    2024年02月11日
    浏览(54)
  • vue3使用响应式数据 + v-model导致响应式失效el-form表单无法输入的问题

    参考文章 重构vue2项目时发现的问题,原始项目使用的是 Element-ui 。 其实vue3可以使用适配的 Element-plus 问题描述 el-form表单无法输入 控制台报错 Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option. 使用响应式变量时应先声明 解决办法

    2024年02月15日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包