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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
Nov 13 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
AngularJS ng-controller 指令简单实例
Aug 01 Javascript
Sequelize中用group by进行分组聚合查询
Dec 12 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
angularJS开发注意事项
May 26 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 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
Admin generator, filters and I18n
2011/10/06 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
2014/09/06 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
vue 2.0封装model组件的方法
2017/08/03 Javascript
Vue2.0 axios前后端登陆拦截器(实例讲解)
2017/10/27 Javascript
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
2017/12/24 jQuery
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
Python3 元组tuple入门基础
2020/02/09 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
书香校园活动方案
2014/02/28 职场文书
不拖欠农民工工资承诺书
2014/03/31 职场文书
工地安全生产标语
2014/06/06 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
素质教育培训心得体会
2016/01/19 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python