element-ui 设置表单必填项

最新推荐文章于 2024-06-25 14:25:30 发布
最新推荐文章于 2024-06-25 14:25:30 发布
阅读量7.9k 收藏 2
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/thinkingw770s/article/details/92799526
版权 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="姓名" prop="named">
      <el-input v-model="form.named" ></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="sex">
      <el-select v-model="form.sex" placeholder="请选择" >
        <el-option label="男" value="man"></el-option>
        <el-option label="女" value="woman"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmite('form')">确定</el-button>
      <el-button type="primary" @click="resetForm('form')">重置</el-button>
    </el-form-item>
  </el-form>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el : "#app",
    data : {
      form:{
        named:"",
        sex:""
      },
      rules:{
        named :[{required: true, message: '请输入', trigger: 'blur'}],
        sex :[{required: true, message: '请输入', trigger: 'blur'}]
      }
    },
    methods: {
      onSubmite(formData) {
        this.$refs[formData].validate((valid) => {
          if (!valid) {
            console.log(this.form)
          }
        });
      },
      resetForm(formData) {
        this.$refs[formData].resetFields();//表单重置
      }
    }
  })
</script>
</html>
thinkingw770s
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element ui表单必填_详解element-ui设置下拉选择切换必填和非必填
weixin_35148673的博客
12-29 6014
➢ 需求默认都是必选下拉选择的时候选择必填，活动名称为必填，需要校验和显示*选择非必填，活动名称不做校验，隐藏*➢ 初始校验规则经测试，网上其他的方式都没有实现需求，动态切换rules中的required没有作用因为按照以下的写法的话，element-ui在组件初始化后校验规则就定型了，切换也没用rules: {name: [{ required: true, message: "请输入名称", ...
element ui 表格全选与否
TionSu的博客
11-15 1万+
template部分： template> div class="operator"> el-button @click="toggleSelect(tableData)" size="mini">全选/反选el-button> el-button @click="deleteSelect" type="danger" size="mini">删除el-button>
elementui中form表单input必填以及显示/隐藏小红星星
进无止进
06-08 1万+
elementUI中form表单input必填，显示/隐藏红色星号
elementui的输入框设置为必填的代码
weixin_35756130的博客
01-04 3636
使用 element-ui 的输入框，可以在绑定的 v-model 中使用 required 来设置输入框为必填。 示例代码如下： <template> <el-input v-model="value" placeholder="请输入" required></el-input> </template> <script> expo...
表单prop必填验证根据el-radio-group的值来动态绑定
最新发布
qq_29124867的博客
06-25 207
1、radio的值为5时输入框是必填，其余时候是非必填。
el-input设置必填提示（单个&多个）
song_song0927的博客
12-26 1万+
el-input设置必填
针对elementUI input框验证非空或者必填项问题（输入之后还在报错）
热门推荐
小白在成长的路上
11-12 1万+
看了好几篇博客，啰里啰唆的不简明 我就整理一下，方便节省大家时间 首先表单验证是用到 rules属性 （需要在data中定义或者单个的话直接写在后面就行） 我这里是在data中定义了一个formRule数组 ，因为我需要验证多个input 这是定义的formRule数组，一定要注意formRule中的属性名字跟update_data中的属性名字一致，不然就会出现input输入之后还报错的现象 附加提示一下 required 是否必填 trigg...
详解element-ui设置下拉选择切换必填和非必填
12-10
在Element-UI中，开发Web应用时常会遇到需要动态调整表单验证规则的情况，比如一个下拉选择框根据用户的选择，使得某个输入框变为必填或非必填。本篇文章将详细讲解如何实现这一功能。 首先，我们来看一下具体的...
详解element-ui 表单校验 Rules 配置 常用黑科技
10-15
`Rules`配置是Element-UI表单组件`el-form`的核心功能之一，用于定义表单字段的验证规则，确保用户提交的数据准确无误。以下是对这些规则配置的详细说明： 1. **类型验证**： - `string`：验证字段的值必须是字符...
详解element-ui中form验证杂记
10-17
message: '角色名称为必填项' } ``` 移除HTML中的`required`属性，并将验证规则移到JavaScript部分，可以避免默认错误提示的出现。 其次，处理级联提交表单验证的情况。在某些场景下，我们需要在提交表单前验证多...
使用element-ui +Vue 解决 table 里包含表单验证的问题
12-28
在实际使用中经常会遇到需要在Form表单中使用table表格进行表单提交，同时又需要对table的字段进行校验，效果如图所示： 这个校验中，最关键的问题在于如何给el-form-item 动态绑定prop。 :prop=”‘tableData.’ +...
Element UI Demo
04-24
开发者可以在 `rules` 对象中定义每个表单项的验证规则，比如必填项、长度限制、格式检查等。这些规则会在表单提交时自动触发，通过 `async-validator` 或 `validate` 方法进行验证。如果验证失败，Element UI 的...
element-ui 表单必填项和表单验证方式解析，以及表单验证规则
qq_36437172的博客
03-04 9985
（一）表单必填项 需求：表单里必填项需要有红色星号标识，当未填写时显示中文提示语 思路：表单项里写required 问题：当表单项的验证规则绑定为blur事件时，表单项内元素清空后，会提示“xx is required”，其中xx是绑定的prop值。 解决办法：在表单项里模拟红色星号的样式，去掉required，写class=“is-required”,必填的限制在绑定的rules里写。 （二...
element-ui的Form表单设置自定义校验规则。input输入框设置必填。input框前红色*号的设置。
qq_56715703的博客
06-15 2158
在组件中填写方法中需要的属性（ref，prop，:ruls）首先，从element-ui中找到你需要的组件。在methods方法中加入。
【Element】输入框 el-input
joanmelon的博客
01-22 3874
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
vue及elementui表单部分必填，部分任选一项填写
weixin_44707050的博客
09-01 2023
如图： 有必填的部分还有选填的部分，同时要满足正则校验，以及是否只选了一项的判断 <template> <div class="home"> <p style="color:red">{{tip}}</p> <p>任意选择一项</p> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" cl.
2020-08-26
g_shanshan的博客
08-26 578
@TOCelement UI表单中如何快速实现在必填项label前添加红色星号 element UI表单不添加rules时，快速在必填项label前添加 ∗\color{red}{*}∗ element UI表单在必填项label前添加红色星号有很多方法，本文是针对只想在必填项前添加红色星号起到提示作用时的一种快速且便捷的方式。 以用户信息为例 以用户信息为例，如下图所示： 从图中可以发现，除了 邮箱，其他项皆为必填信息。 第一步：表单实现 <el-form :model="form" ref="
element ui input设置为必填项
05-17
你可以通过设置 `required` 属性来将 Element UI 的 Input 设置为必填项。例如： ```html <el-input v-model="inputValue" placeholder="请输入内容" required></el-input> ``` 这样，在用户未输入任何内容时，提交表单时会出现提示信息，要求用户输入必填项。你也可以通过 `:required` 动态绑定一个布尔值来实现必填项的动态控制。例如： ```html <el-input v-model="inputValue" placeholder="请输入内容" :required="isInputRequired"></el-input> ``` 在这个例子中，`isInputRequired` 可以是一个计算属性或者一个简单的变量，根据业务逻辑来控制输入框是否为必填项。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值