elementUI的表单给把select选择器的验证bug

最新推荐文章于 2023-05-10 19:07:35 发布
最新推荐文章于 2023-05-10 19:07:35 发布
阅读量820 收藏
点赞数 1
分类专栏： element组件 vue 文章标签： elementui bug 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenlim87/article/details/127849164
版权

select组件明明触发了change事件，并且绑定的变量有值时，还是提示不能为空：

这时可以将表单中的选择器验证规则修改一下：

// 修改前
trigger:'change'

// 修改后
trigger:['blur','change']

 

lamCCH
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery formValidator 表单校验插件 4.1.0
05-01
jQuery formValidator表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种脚本控制。jQuery formValidator表单插件致力于改善重复编程、考虑浏览器兼容性等情况；你只关心业务逻辑，而无需关心实现过程,只需简单的配置，无需写代码就能实现表单的检验。 jQuery formValidator表单校验插件 4.1.0 升级内容： 新增以下功能： 1、新增换肤功能，包括提示层的样式、输入控件(目前只支持text、password、file、textarea)的样式。initConfig增加theme属性，表示皮肤名，theme的值可取目录theme下的文件夹名。详见电子版帮助文件里的【制作皮肤】 2、formvalidator函数增加属性leftTrim和rightTrim。是否去掉左边或右边的空格，默认值false 3、ajaxValidator的success事件，可以返回字符串，表示错误信息，将显示在提示层上。 4、为initConfig增加属性ajaxForm，用于配置整个表单ajax提交的参数，详见demo7和api帮助 $.formValidator.initConfig({theme:"Default",submitOnce:true,formID:"form1",ajaxForm:{ dataType : "html", buttons:$("#button"), url: "http://www.51gh.net/chkuser.aspx?act=ok" }}); 5、所有函数的onError和onSuccess支持字符串，也支持函数(参数为当前的值)返回字符串。 6、发布网页版代码生成器，从当前版本开始支持。 解决以下BUG： 1、修正ajaxValidator函数有一处条件书写错误的BUG。 2、修正formvalidator函数autoModify属性对password控件不起作用的BUG。 调用步骤： a、在你要校验的表单页面中引入代码生成器的脚本。 b、调用函数。如果已经写了校验代码，请在校验代码注册完成后调用。 $.formValidatorTools.openTools(); 压缩包相关变更 1、所有的帮助、范例制作成了chm电子帮助文件 2、插件相关的文件放一个目录里 插件支持5种大的校验方式，分别是：inputValidator（针对input、textarea、select控件的字符长度、值范围、选择个数的控制）、compareva lidator（提供2个对象的比较，目前可以比较字符串和数值型）、ajaxValidator（通过ajax到服务器上做数据校验）、regexValidator（提供可扩展的正则表达式库） 、functionValidator （可使用外部函数来做校验，可以当做过程处理）。插件支持四种提示模式：固定提示层(FixTip)、自动构建提示层(AutoTip)、单个提示层跟随(SingleTip)、弹出提示内容(AlertTip)。插件支持换肤：默认情况下提供4套皮肤，其中包括58网、网易邮箱注册两套皮肤。 本插件于其他校验控件最大的区别有6点： 1、校验功能可以扩展。    对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制，别的表单校验控件是代码里写死的，而formValidator是通过外部js文件来扩展的，你可以通过写正则表达式和函数来无限的扩展这些功能。 2、实现了校验代码于html代码的完全分离。    你的所有信息都无需配置在校验表单元素上，你只要在js上配置你的信息。使美工（界面）和JavaScript工程师的工作不交织在一起 3、你只需写一行代码就能完成一个表单元素的所有校验。你只需要写一行代码就能完成一下所有的控制 •支持所有类型客户端控件的校验 •支持jQuery所有的选择器语法，只要控件有唯一ID和type属性 •支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js，你可以自由的添加、修改里面的内容。 •支持2种校验模式。第一种：文字提示(showword模式)；第二种：弹出窗口提示(showalert模式) •支持多个校验组。如果一个页面有多个提交按钮，分别做不同得提交，提交前要做不同的校验，所以你得用到校验组的功能。 •支持4种状态的信息提示功能，可以
Element UI 表单【详解】-- 表单校验
coldriversnow的专栏
07-18 9836
callback(new Error('必须年满18岁'));rules: {// 是否必填 没有这个就没有前面红点// 自定义验证规则// 触发事件},
element ui select 验证问题
a631373000的专栏
06-12 1万+
在这里需要有几个注意的问题，举例如下 <el-form-item label="新闻类别" prop="typevalue"> <el-select v-model="form.typevalue" placeholder="请选择新闻类别"> <el-option v-for="item in this.typelist.options" :key=...
elementui的一个el-form-item里面多个el-select 的校验
weixin_47889154的博客
05-10 683
【代码】elementui的一个el-form-item里面多个el-select 的校验。
Element ui 表单验证触发方式：trigger的两种选项
pHoSpHeneS80的博客
12-06 3659
Element ui 表单验证触发方式：trigger
element-ui 表单校验，el-select校验失效问题
m0_66899315的博客
04-29 1万+
element-ui 表单校验，el-select遇到了校验失效问题，有值的情况下，校验规则并没有对应消失
element-ui el-input / el-select输入框的非空校验
lx233
12-17 1万+
一、之前写的实现 直接js判断就可以 .prevent .stop 是阻止继续冒泡 不一样的 见 官方说明 1https://cn.vuejs.org/v2/cookbook/form-validation.html#%E4%BD%BF%E7%94%A8%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%A1%E9%AA%8C 2 自定义 （我没看）https://...
element ui select校验问题 避坑
老丁学抓娃的博客
12-06 474
element ui select校验问题避坑
Vue Element Select选择器自定义验证规则
路虽远行则将至，事虽难做则必成。
12-02 4513
在我们在做增删改查的时候，一般会遇到添加和修改的from表单需要表单验证。一般常规的from表单是有自己的验证规则，from加一个 :rules="rules"但他需要v-model值和prop值要一样，这是常规情况。我遇到的是，绑定多个负责人和对应的电话，加验证规则。实际场景1.我们在from表单绑定多个负责人就需要使用到 select 选择器，下拉的数据是点击打开弹框时发请求来的。2.点击选中的时候，数据时对象形式，id 名字 电话 绑定在一起的。选中负责人的时候，我们是把一整个对象存到数组里面。
jQuery Selectors(选择器)的使用(七、子元素篇)
12-11
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：:nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。...
vue-form-maker:Vue 表单生成器——动态生成表单组件
05-02
Select 选择器 Slider 滑块 DatePicker 日期选择器 TimePicker 时间选择器 Cascader 级联选择器 InputNumber 数字输入框 Rate 评分 Upload 上传 ColorPicker 颜色选择器 使用 在单文件组件中引用 npm i vue-form-...
科汛Kesion Eshop v5.0 GBK正式版
03-26
17、修复自定义表单字段类型选把下拉列表时，生成的对应项值出错 18、修复选择支付宝支付，提示变量未定义:'creatAlipayItemURL' 19、修复广告系统无法按顶部的查看选项进行查看 20、改进友情链接后台允许修改密码 ...
pageadmin学校网站管理系统 v3.0 build20130406
04-03
4、增加了数值和日期型字段不能选择select和radio表单的缺陷。 5、fckeditor编辑器中增加了swfupload上传插件。 6、会员列表页增加了信息发送窗口，并修正了群发站内短信无效的bug。 7、修改了关闭静态时栏目静态...
jsp项目如何引入vue
热门推荐
chenlim87的博客
11-11 2万+
如题，背景就不介绍了，项目是前后端不分离的，这让我一个转行前端对JSP语法不熟的人来说写起来着实难受。后来加了个考试的新功能，果断引入vue和element，还有polyfill.js，因为要兼容IE9。 刚开始写的时候vue和elememt都是引的cdn上的资源，但是我们项目只能使用内网，所以需要将vue和element下载到本地。从线上转到本地的过程中，遇到了一些坑，下面就来说一下。 cdn引用方式 //在head头部引入elementUI样式 <link rel="stylesheet" hre
在echaerts饼图（环形图）内部自定义文字
chenlim87的博客
04-13 1万+
需求是利用echarts的饼图之环形图在内部自定义文字。如下图： const option = { title: [ { // 第一个圆环标题 text: '省市公司', // 主标题 textStyle: { // 主标题样式 color: '#333', fontWeight: 'bold', fontSize: 14
vue中使用ref引用子组件方法报错的问题
chenlim87的博客
03-25 7157
项目中，父组件使用了 ref 属性调用子组件的方法突然报错了，代码和报错如下： 解决方法：把 mounted 里的调用放到一个定时器里就可以了 我的理解是因为 ref 属性初始渲染时，子组件还没挂载好，所以这个方法还不存在，所以不能访问。加个定时器延时执行。但是其他使用 ref 属性调用的方法又没有报错，百思不得其解。知道的可以回答下。 setTimeout(() =&g...
前后台IP地址不同，跨域请求解决方法
chenlim87的博客
07-13 6224
跨域在开发中经常会碰到，解决方法也很多。今天来记录一下实际项目中遇到的跨域问题及解决方法。 项目初始功能开发完毕后，准备线上布署。后台布署好后，访问出错。登录成功好再去请求别的接口，直接返回登录页面。（此时页面并没有报跨域的错，不知道为啥）但是在本地环境正常。经过排查，发现线上环境有两个ip地址和端口。比如前端项目地址是192.168.10.01:8080，后端接口地址是192.168.10.02:8081。随即在本地测了一下，前端地址是localhost:8080，后台地址改为本机ip地址：192.16
怎么将前端项目打成war包
chenlim87的博客
07-28 5971
前言 我们前端开发人员打包一般指在前台打包，比如一个vue项目，运行打包命令npm run build。这个是基于Node.js来打包运行的。项目线上环境是没有node的，所以为了配合后端有时要将项目打成后台需要的war包。 步骤 1、还是先运行npm run build,生成dist文件夹 2、新建一个tomcat项目，并安装maven,创建过程可网上搜索 3、项目创建好后，找到src/main/webapp文件夹，将之前前台打包后生产的dist文件夹内的文件复制到这里。 4、用idea软件打开新建的t
vue实现伪登录（单点登录 登录白名单设置）
chenlim87的博客
05-08 4873
实现伪登录（登录白名单设置）
elementui表单验证
最新发布
09-05
Element UI 提供了一套强大的表单验证机制，可以帮助开发者快速实现表单验证功能。下面是一个简单的示例，演示如何使用 Element UI 进行表单验证： 首先，确保你已经安装了 Element UI，并在项目中正确引入了相关的样式和组件。 然后，在你的 Vue 组件中，使用 `<el-form>` 和 `<el-form-item>` 组件包裹你的表单元素，并在需要进行验证的表单元素上添加 `prop` 属性指定该表单元素的唯一标识符。 接下来，通过添加规则对象，定义每个表单元素的验证规则。你可以通过 `rules` 属性传入一个对象，对象的键是表单元素的 `prop` 值，值是一个数组，数组中的每个对象表示一个验证规则。 最后，在提交表单时，可以通过调用 `<el-form>` 组件的 `validate` 方法来触发表单验证，如果验证通过，则执行相应的提交操作。 以下是一个示例代码： ```vue <template> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 表单验证通过，执行提交操作 // ... } else { // 表单验证未通过 return false; } }); } } } </script> ``` 以上示例中，我们定义了一个包含用户名和密码的表单，为每个表单元素定义了相应的验证规则。在提交表单时，调用 `validate` 方法进行表单验证，如果验证通过，则可以执行提交操作。 这只是一个简单的示例，Element UI 还提供了更多的验证规则和自定义验证方法，可以根据具体需要进行配置。详细的文档可以参考 Element UI 官方文档中的表单验证部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值