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 iframe内部出滚动条
Feb 11 Javascript
用js实现计算加载页面所用的时间
Apr 02 Javascript
juqery 学习之四 筛选过滤
Nov 30 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 Javascript
9行javascript代码获取QQ群成员具体实现
Oct 16 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
深入理解Java线程编程中的阻塞队列容器
Dec 07 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
jquery 实现回车登录详解及实例代码
Oct 23 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
js设计模式之单例模式原理与用法详解
Aug 15 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防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
php使用PDO方法详解
2014/12/27 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
JavaScript中的方法重载实例
2015/03/16 Javascript
javascript实现控制文字大中小显示
2015/04/28 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
实例讲解javascript注册事件处理函数
2016/01/09 Javascript
js 获取经纬度的实现方法
2016/06/20 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python CSV模块使用实例
2015/04/09 Python
Python生成随机密码的方法
2017/06/16 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python中 * 的用法详解
2019/07/10 Python
python实现日志按天分割
2019/07/22 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
基于K.image_data_format() == 'channels_first' 的理解
2020/06/29 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
巧克力蛋糕店创业计划书
2014/01/14 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
叶问观后感
2015/06/15 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
中秋节随笔
2015/08/15 职场文书