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 相关文章推荐
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
jqeury eval将字符串转换json的方法
Jan 20 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 Javascript
jQuery对象与DOM对象转换方法详解
May 10 Javascript
jQuery短信验证倒计时功能实现方法详解
May 25 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
php实现的AES加密类定义与用法示例
2018/01/29 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
python二叉树的实现实例
2013/11/21 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
flask中过滤器的使用详解
2018/08/01 Python
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python decimal模块使用方法详解
2020/06/08 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
简历的个人自我评价范文
2014/01/03 职场文书
授权委托书协议书
2014/10/16 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
学校通报表扬范文
2015/05/04 职场文书
被告代理词范文
2015/05/25 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
ThinkPHP5和ThinkPHP6的区别
2021/03/31 PHP