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 select操作的日期联动实现代码
Dec 06 Javascript
WEB 浏览器兼容 推荐收藏
May 14 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
node在两个div之间移动,用ztree实现
Mar 06 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
JS实现数组去重的11种方法总结
Apr 04 Javascript
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
基于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)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
thinkphp多表查询两表有重复相同字段的完美解决方法
2016/09/22 PHP
PHP反射实际应用示例
2019/04/03 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
js 学习笔记(三)
2009/12/29 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
2013/01/03 Javascript
使用js画图之饼图
2015/01/12 Javascript
JS简单实现String转Date的方法
2016/03/02 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
Vuex的actions属性的具体使用
2019/04/14 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Python实现简单的四则运算计算器
2016/11/02 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python微信撤回监测代码
2019/04/29 Python
django2笔记之路由path语法的实现
2019/07/17 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
python递归下载文件夹下所有文件
2019/08/31 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
详解Python IO编程
2020/07/24 Python
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
客服实习的个人自我鉴定
2013/10/20 职场文书
房产委托公证书样本
2014/04/04 职场文书
经济贸易专业自荐信
2014/06/11 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书