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代码)
Oct 29 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
javascript闭包入门示例
Apr 30 Javascript
简单易用的倒计时js代码
Aug 04 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
Nov 06 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
简单理解js的prototype属性及使用
Dec 07 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
如何使用vue3打造一个物料库
May 08 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
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
ThinkPHP的cookie和session冲突造成Cookie不能使用的解决方法
2014/07/01 PHP
PHP提高编程效率的20个要点
2015/09/23 PHP
[原创]解决wincache不支持64位PHP5.5/5.6的问题(提供64位wincache下载)
2016/06/22 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
2013/10/24 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
Javascript对象字面量的理解
2016/06/22 Javascript
AngularJS select设置默认值的实现方法
2017/08/25 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
koa-router源码学习小结
2018/09/07 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
python搭建微信公众平台
2016/02/09 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python 爬虫性能相关总结
2020/08/03 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
写给老师的表扬信
2014/01/21 职场文书
父亲节活动策划方案
2014/08/24 职场文书
英语教师个人工作总结
2015/02/09 职场文书
4S店客服专员岗位职责
2015/04/07 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
详解Java实践之建造者模式
2021/06/18 Java/Android
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android