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转换农历类实现及调用方法
Jan 27 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
Vue实现双向数据绑定
May 03 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
通过实例解析js简易模块加载器
Jun 17 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
如何使用vue slot创建一个模态框的实例代码
May 24 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实现自动获取生成文章主题关键词功能的深入分析
2013/06/03 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php微信支付之APP支付方法
2015/03/04 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP基于Redis消息队列实现发布微博的方法
2017/05/03 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
html5+javascript实现简单上传的注意细节
2016/04/18 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)
2017/07/03 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
React从react-router路由上做登陆验证控制的方法
2018/05/10 Javascript
详解ES6中的 Set Map 数据结构学习总结
2018/11/06 Javascript
Vue 实现前端权限控制的示例代码
2019/07/09 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
Python3利用openpyxl读写Excel文件的方法实例
2021/02/03 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
工商学院毕业生个人自我评价
2013/09/19 职场文书
精彩的大学生自我评价
2013/11/17 职场文书
组工干部对照检查材料
2014/08/25 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2014年卫生保健工作总结
2014/12/08 职场文书
会议接待欢迎词范文
2015/01/26 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
《正面管教》读后有感:和善而坚定的旅程
2019/12/19 职场文书
MySQL之DML语言
2021/04/05 MySQL