iView——表单校验是否为空填坑
最近转岗去做了vue开发,然后使用的UI框架是iView,总体来说iView,elementUI都差不多,内容丰富使用方便,可是可是挖的坑也不少,尤其是有些功能的使用方法介绍不全,一笔带过,需要自己摸索,这不,最近遇到一个匪夷所思的问题。
大家都知道表单校验中最基本的一条就是是否为空的校验。这个官网给出了例子,我们来看下:
ruleValidate: {name: [{required: true, message: 'The name cannot be empty', trigger: 'blur'}],mail: [{required: true, message: 'Mailbox cannot be empty', trigger: 'blur'},{type: 'email', message: 'Incorrect email format', trigger: 'blur'}],city: [{required: true, message: 'Please select the city', trigger: 'change'}],gender: [{required: true, message: 'Please select gender', trigger: 'change'}],interest: [{required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change'},{type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change'}],date: [{required: true, type: 'date', message: 'Please select the date', trigger: 'change'}],time: [{required: true, type: 'string', message: 'Please select time', trigger: 'change'}],desc: [{required: true, message: 'Please enter a personal introduction', trigger: 'blur'},{type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur'}]}
还算挺清晰的哈,别着急,请听我的问题,如果input里面输入的是数字,而且校验类型type=number
,你猜input
的value
的类型是什么,如果说是number
,那你就太天真了,鬼知道经历了什么,iView
给出的结果是string
,所以当大家在校验数字是否为空的时候,即使输入了内容,也还是会报xxx不能为空
的错误,怎么解决呢,也简单,官方出错了,我自己写一套不就行了吗,嘿嘿,看代码。
const isEmpty = (rule, value, callback) => {if (value == null || value == undefined || value == "") {callback(new Error('价格不能为空!'))} else {callback();}};ruleValidate: { basePrice: [{required: true, message: '基础价格不能为空!', trigger: 'blur', type: 'number', validator: isEmpty},],},
其他坑请看后续更新~
iView——表单校验是否为空填坑相关推荐
- iview表单校验上传图片成功后,提示文字不消失
最近做的项目中有直播和课程后台管理模块,遇到一个bug,其中有个功能是上传直播图片和直播附件,而且都是必填项.用的框架是vue+iview,用Form表单验证,对必填项做校验.当不填写时点提交会出现红 ...
- 各个组件表单 校验时自动定位到未填处
element 项目 el-form 适用于表单 let isError = document.getElementsByClassName('is-error')setTimeout(() => ...
- HTML表单校验非空的两种方式
HTML表单校验非空的两种方式 第一种方式 第二种方式 实例:校验表单中姓名为非空 第一种方式 let reg = /\S/; 第二种方式 let reg_name = /^\w+$/; 实例:校验表 ...
- javascript 校验 非空_Javascript的表单与验证-非空验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性 在要对表单里的数据进行验证的时候,可以利用getElementById()来 ...
- iview 的modal内form表单校验的坑
在开发iview-admin时,在modal内进行表单校验,发现一个问题,因为新增和编辑modal是共用一个modal,在点击编辑,打开modal进行校验没有问题,之后关闭modal,在点击新增按钮, ...
- EelemntUI中e-form表单校验的使用以及表单校验的规则
场景 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 官方示例代码 <el-form ...
- jQuery表单校验jquery.validate.js的使用
jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...
- 【前端3】jquary:页面加载,选择器,隔行换色,Dom,全选,动画,遍历,广告/抽奖,表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
- 开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm
开发指南专题十:JEECG微云快速开发平台--表单校验组件ValidForm 10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub" ...
最新文章
- DCN-cs6200 ipv6 isatap 隧道
- 实战 Spring Cloud Gateway 之限流篇
- Linux命令之df
- [SDOI2015]约数个数和【莫比乌斯反演】
- mysql 按重复排序_php-按日期排序并允许重复的日期时,获取MySQL中的上一个和下一个记录...
- Oracle Advisor
- Python之列表方法
- oracle表空间操作详解
- Java黑皮书课后题第10章:*10.17(平方数)找出大于Long.MAX_VALUE的前10个平方数。平方数是指形式为n^2的数
- 编辑距离(信息学奥赛一本通-T1276)
- 呵呵呵,一周这么来也不错
- 知名网游Server端架构分析
- pe如何自动加载外置工具_winpe无法加载外置程序解决方法
- Visual Stdio fopen错误
- 从源码角度探索 Mybatis 插件注册方式
- c语言三个矩阵乘法,c语言矩阵相乘
- html默认office打开如何更改,怎么设置office默认打开方式,修改office的默认打开方式...
- 手把手教萌新2:认识python交互式窗口
- 虚拟机将ip地址修改成静态的
- Spring Integration入门