封装验证blue事件插件
(function ($) {
$.fn.checkForm = function (options) {
var root = this; //将当前应用对象存入root
var isok = false; //控制表单提交的开关
var pwd1; //密码存储
var defaults = {
//图片路径
img_error: "img/error.gif",
img_success: "img/success.gif",
//提示信息
tips_success: '', //验证成功时的提示信息，默认为空
tips_required: '不能为空',
tips_email: '邮箱地址格式有误',
tips_num: '请填写数字',
tips_chinese: '请填写中文',
tips_mobile: '手机号码格式有误',
tips_idcard: '身份证号码格式有误',
tips_pwdequal: '两次密码不一致',
//正则
reg_email: /^\w+\@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/i, //验证邮箱
reg_num: /^\d+$/, //验证数字
reg_chinese: /^[\u4E00-\u9FA5]+$/, //验证中文
reg_mobile: /^1[3458]{1}[0-9]{9}$/, //验证手机
reg_idcard: /^\d{14}\d{3}?\w$/ //验证身份证
};
//不为空则合并参数
if(options)
$.extend(defaults, options);
//获取（文本框，密码框，多行文本框），当失去焦点时，对其进行数据验证
$(":text,:password,textarea", root).each(function () {
$(this).blur(function () {
var _validate = $(this).attr("check"); //获取check属性的值
if (_validate) {
var arr = _validate.split(' '); //用空格将其拆分成数组
for (var i = 0; i < arr.length; i++) {
//逐个进行验证，不通过跳出返回false,通过则继续
if (!check($(this), arr[i], $(this).val()))
return false;
else
continue;
}
}
})
})
//表单提交时执行验证,与上面的方法基本相同，只不过是在表单提交时触发
function _onSubmit() {
isok = true;
$(":text,:password,textarea", root).each(function () {
var _validate = $(this).attr("check");
if (_validate) {
var arr = _validate.split(' ');
for (var i = 0; i < arr.length; i++) {
if (!check($(this), arr[i], $(this).val())) {
isok = false; //验证不通过阻止表单提交，开关false
return; //跳出
}
}
}
});
}
//判断当前对象是否为表单，如果是表单，则提交时要进行验证
if (root.is("form")) {
root.submit(function () {
_onSubmit();
return isok;
})
}
//验证方法
var check = function (obj, _match, _val) {
//根据验证情况，显示相应提示信息，返回相应的值
switch (_match) {
case 'required':
return _val ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_required, false);
case 'email':
return chk(_val, defaults.reg_email) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_email, false);
case 'num':
return chk(_val, defaults.reg_num) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_num, false);
case 'chinese':
return chk(_val, defaults.reg_chinese) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_chinese, false);
case 'mobile':
return chk(_val, defaults.reg_mobile) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_mobile, false);
case 'idcard':
return chk(_val, defaults.reg_idcard) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_idcard, false);
case 'pwd1':
pwd1 = _val; //实时获取存储pwd1值
return true;
case 'pwd2':
return pwdEqual(_val, pwd1) ? showMsg(obj, defaults.tips_success, true) : showMsg(obj, defaults.tips_pwdequal, false);
default:
return true;
}
}
//判断两次密码是否一致(返回bool值)
var pwdEqual = function(val1, val2) {
return val1 == val2 ? true : false;
}
//正则匹配(返回bool值)
var chk = function (str, reg) {
return reg.test(str);
}
//显示信息
var showMsg = function (obj, msg, mark) {
$(obj).next("#errormsg").remove();//先清除
var _html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_error + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
if (mark)
_html = "<span id='errormsg' style='font-size:13px;color:gray;background:url(" + defaults.img_success + ") no-repeat 0 -1px;padding-left:20px;margin-left:5px;'>" + msg + "</span>";
$(obj).after(_html);//再添加
return mark;
}
}
})(jQuery);
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>表单验证插件</title>
</head>
<body>
<form id="myform" method="post" action="success.html">
<ul>
<li>
邮箱：<input type="text" name="email" check="required email" />
</li>
<li>
密码：<input type="password" check="required pwd1" />
</li>
<li>
确认密码：<input type="password" check="required pwd2" />
</li>
<li>
手机：<input type="text" name="num" check="required mobile" />
</li>
<li>
数字：<input type="text" name="num" check="required num" />
</li>
<li>
地址：<textarea cols="5" rows="5" check="required"></textarea>
</li>
<li>
不加check验证的文本框：<input type="text" name="num" />
</li>
</ul>
<input type="submit" value="提交" />
</form>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
封装成js引入
<script src="vld.js" type="text/javascript"></script>
<script type="text/javascript">
$("#myform").checkForm();
</script>
</body>
</html>
附带图片地址
封装验证blue事件插件的更多相关文章
- jQuery编写插件--封装全局函数的插件（一些常用的js验证表达式）
上一篇写到了jQuery插件的3种类型,介绍了第一种类型的写法--封装jQuery对象的方法插件.这一篇要介绍第二种插件类型:封装全局函数的插件:这类插件就是在jQuery命名空间内部添加函数:这类插 ...
- 封装的localstorge的插件，store.js
封装的localstorge的插件,store.js https://github.com/marcuswestin/store.js/
- jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
- 第一百八十六节，jQuery，验证表单插件，Ajax 表单插件，验证和提交表单
jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...
- 基于jQuery封装一个瀑布流插件
/*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jQuery的validation插件(验证表单插件)
更完整的参考:http://www.runoob.com/jquery/jquery-plugin-validate.html 验证隐藏字段的使用(验证通过后ajax提交表单):http://www. ...
- 使用jq把js代码封装一个自己的插件
为什么要把js功能封装成插件呢?我觉得有以下几点吧 1.最基本的原因就是便于代码复用. 2.便于维护和管理. 3.提升自身的能力. 4.避免各个相同功能组件的干扰,以及一些作用域会相互影响的问题. j ...
- 封装自己的jquery插件
自己尝试封装的一个在工作当中使用的多级弹窗插件: ;(function ($, window, document) { //用一个自调用匿名函数把插架代码包裹起来,防止代码污染 $.fn.multi ...
随机推荐
- 计算-服务器最大并发量-http协议请求-以webSphere服务器为例-考虑线程池
请求的处理流程 广域网上有大量的并发用户同时访问Web服务器,Web服务器传递请求给应用服务器(Web容器),Web容器传递请求给EJB容器,然后EJB容器发送数据库连接请求给数据库. 请求的处理流程 ...
- MySQL不会丢失数据的秘密，就藏在它的 7种日志里
本文收录在 GitHub 地址 https://github.com/chengxy-nds/Springboot-Notebook 进入正题前先简单看看MySQL的逻辑架构,相信我用的着. MySQ ...
- [Skill]加速npm与yarn还原
npm源 使用cnpm alias cnpm="npm --registry=https://registry.npm.taobao.org //或者 npm install -g cnpm ...
- NOIP初赛篇——08计算机安全知识
引言 计算机安全中最重要的是存储数据的安全,其面临的主要威胁包括:计算机病毒.非法访问.计算机电磁辐射.硬件损坏等. 计算机病毒是附在计算机软件中的隐蔽小程序,它和计算机其他工作程序一样,但会 ...
- Solon rpc 之 SocketD 协议 - RPC调用模式
Solon rpc 之 SocketD 协议系列 Solon rpc 之 SocketD 协议 - 概述 Solon rpc 之 SocketD 协议 - 消息上报模式 Solon rpc 之 Soc ...
- LeetCode106 从中序和后序序列构造二叉树
题目描述: 根据一棵树的中序遍历与后序遍历构造二叉树. 注意:你可以假设树中没有重复的元素. 例如,给出 中序遍历 inorder = [9,3,15,20,7] 后序遍历 postorder = [ ...
- #2020征文-开发板# 用鸿蒙开发AI应用（五）HDF 驱动补光灯
目录: 前言 硬件准备 HDF 驱动开发 总结 前言上一篇,我们在鸿蒙上运行了第一个程序,这一篇我们来编写一个驱动开启摄像头的红外补光灯,顺便熟悉一下鸿蒙上的 HDF 驱动开发. 硬件准备先查一下原理 ...
- 为linux添加一块新硬盘并分区
一---如何增加一块硬盘1:虚拟机添加硬盘2:分区3:格式化4:挂载5:设置可以自动挂载 1---设置里面 2---分区命令 fdisk /dev/sdb开始分区m显示命令列表p显示磁盘分区 同fdi ...
- 【Java】标识符
一.标识符 文章目录 一.标识符 1.标识符的命名规则 2.关键字.保留字.特殊值 3.code Java 对各种变量.方法和类等要素命名时使用的字符序列称为标识符.简单的说,凡是程序员自己命名的部分 ...
- RocketMQ—消息队列入门
消息队列功能介绍 字面上说的消息队列是数据结构中"先进先出"的一种数据结构,但是如果要求消除单点故障,保证消息传输可靠性,应对大流量的冲击,对消息队列的要求就很高了.现在互联网的& ...