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实现检测浏览器及版本的脚本代码
Jan 22 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
js限制input只能输入有效的数字(第一个不能是小数点)
Sep 28 Javascript
解决vue无法设置滚动位置的问题
Oct 07 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP实现的简单日历类
2014/11/29 PHP
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
thinkPHP和onethink微信支付插件分享
2019/08/11 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
2017/05/08 jQuery
easyui combogrid实现本地模糊搜索过滤多列
2017/05/13 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
VUE v-model表单数据双向绑定完整示例
2019/01/21 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
连接Python程序与MySQL的教程
2015/04/29 Python
tensorflow获取变量维度信息
2018/03/10 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
python 追踪except信息方式
2020/04/25 Python
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
汉语专业应届生求职信
2013/10/01 职场文书
素质拓展感言
2014/01/29 职场文书
奠基仪式主持词
2014/03/20 职场文书
幼儿园新生开学寄语
2015/05/27 职场文书