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 相关文章推荐
快速排序 php与javascript的不同之处
Feb 22 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
Aug 19 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
原生JavaScript编写canvas版的连连看游戏
May 29 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
5种JavaScript脚本加载的方式
Jan 16 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
如何在vue 中引入使用jquery
Nov 10 jQuery
基于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中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
Bootstrap实现水平排列的表单
2016/07/04 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
jQuery子元素过滤选择器用法示例
2016/09/09 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
用Python编程实现语音控制电脑
2014/04/01 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
python实现智能语音天气预报
2019/12/02 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
ECCO英国官网:丹麦鞋履品牌
2019/09/03 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
给老师的检讨书
2014/02/11 职场文书
团组织推优材料
2014/12/29 职场文书
小学生思想品德评语
2014/12/31 职场文书
小学教师年度个人总结
2015/02/05 职场文书
超市督导岗位职责
2015/04/10 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
导游词之无锡梅园
2019/11/28 职场文书