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 设计模式 推荐
Oct 28 Javascript
jquery dialog键盘事件代码
Aug 01 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
Dec 11 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
JavaScript保留两位小数的2个自定义函数
May 05 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
js实现多图左右切换功能
Aug 04 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
vue cli使用绝对路径引用图片问题的解决
Dec 06 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 Javascript
vant 中van-list的用法说明
Nov 11 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
解析PHP的session过期设置
2013/06/29 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php使用curl访问https示例分享
2014/01/17 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
php输出含有“#”字符串的方法
2017/01/18 PHP
js查找父节点的简单方法
2008/06/28 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
一步步教大家编写酷炫的导航栏js+css实现
2016/03/14 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
如何使用Python自动控制windows桌面
2019/07/11 Python
python编写简单端口扫描器
2019/09/04 Python
python+playwright微软自动化工具的使用
2021/02/02 Python
HTML5 canvas基本绘图之绘制曲线
2016/06/27 HTML / CSS
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
局域网标准
2016/09/10 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
学生学习总结的自我评价
2013/10/22 职场文书
奥巴马获胜演讲稿
2014/05/15 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
给老婆的保证书
2015/01/16 职场文书
监守自盗观后感
2015/06/10 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
MYSQL常用函数介绍
2022/05/05 MySQL