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 相关文章推荐
javascript工厂方式定义对象
Dec 26 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
javascript中eval和with用法实例总结
Nov 30 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
解决React Native端口号修改的方法
Jul 28 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
Javascript中window.name属性详解
Nov 19 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使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
JavaScript 参考教程
2006/12/29 Javascript
Javascript中的常见排序算法
2007/03/27 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
读jQuery之一(对象的组成)
2011/06/11 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
js添加table的行和列 具体实现方法
2013/07/22 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
Angular5中状态管理的实现
2018/09/03 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
python encode和decode的妙用
2009/09/02 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python爬虫爬取电影票房数据及图表展示操作示例
2020/03/27 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
英国办公用品商店:Office Outlet
2018/04/04 全球购物
荷兰演唱会和体育比赛订票网站:viagogo荷兰
2018/04/08 全球购物
会计专业自荐信范文
2013/12/02 职场文书
银行办理业务介绍信
2014/01/18 职场文书
理工类毕业自我鉴定
2014/02/20 职场文书
创建文明学校实施方案
2014/03/11 职场文书
餐饮投资计划书
2014/04/25 职场文书
会计专业自荐书
2014/07/08 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
辞职信模板(中英文版)
2015/02/27 职场文书