jquery+正则实现统一的表单验证


Posted in Javascript onSeptember 20, 2015

表单验证一直很繁琐,特别是大点的表单,如果每个input都去单独写验证简直要写死人,最近写了一小段js统一的验证表单内容是否正确。

使用这段代码就不再需要对每个input写格式判断,只需要将正确格式的正则表达式写在datatype里就可以了,提交表单按钮也只需要绑定checkForm函数就可以了。

大家有什么建议可以评论一下

<input type="text" datatype=“正则”/>

//表单验证
//点击下一步事件
function checkForm(form){
var success = true;
$("."+form+" input").each(function(){
var $that = $(this);
var dataType = eval($that.attr("dataType"));
if(dataType!=undefined){
if($that.val().match(dataType)){
$that.removeClass("borderRed");
}else{
$that.focus();
$that.addClass("borderRed");
success = false;
return false;
}
}
})
return success;
}

//给每个带有datatype属性的标签绑定blur focus事件

$(document).on("blur","input",function(){
var $that = $(this);
var dataType = eval($that.attr("dataType"));
if(dataType!=undefined){
if($that.val().match(dataType)){
$that.removeClass("borderRed");
}else{
$that.addClass("borderRed");
}
}
})
$(document).on("focus","input",function(){
$(this).removeClass("borderRed");
});

以上内容给大家分享了jquery+正则实现统一的表单验证,希望大家喜欢。

Javascript 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
3种vue组件的书写形式
Nov 29 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 #Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 #Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 #Javascript
You might like
php 动态添加记录
2009/03/10 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
Angular实现的简单定时器功能示例
2017/12/28 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
ES6新增的数组知识实例小结
2020/05/23 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[01:33]DOTA2上海特级锦标赛 LIQUID战队完整宣传片
2016/03/16 DOTA
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
python SocketServer源码深入解读
2019/09/17 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
百联网上商城:i百联
2017/01/28 全球购物
Perfumetrader荷兰:香水、化妆品和护肤品在线商店
2017/09/15 全球购物
线程同步的方法
2016/11/23 面试题
国际金融专业大学生职业生涯规划书
2013/12/28 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
小学运动会报道稿
2014/10/04 职场文书
实习科室评语
2015/01/04 职场文书
班主任高考寄语
2015/02/26 职场文书
2015年全民创业工作总结
2015/07/23 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js