自己编写jQuery插件之表单验证
吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思。不想这样,不想这样,快让这种情绪消失吧,忽忽....
表单验证在项目中用的还是比较多的,公司当前正在做的项目就要用到,故此写了此插件,先给大家看下在项目中应用的效果图吧:
直接上插件实现代码了,围绕代码进行讲解比较容易点:
/*
描述:基于jquery的表单验证插件。
时间:2014-8-3
作者:similar(281542025@qq.com)
*/
(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);
注释已经讲解了大部分内容了,多数人一看就懂了。
实现原理:
首先定义好正则,和相应的提示信息,
加上自定义check属性,
然后获取check属性的值,多个值用空格分开。利用split()将其拆分为数组,在逐个调用check()方法进行验证。
之后通过验证的返回值来确定显示的信息。
这里有两个验证是比较特别的,就是:
1.验证是否为空 (required)
2.两次密码是否一致 (pwd2)
这两个都没有用到正则,因为根本就用不上。 两次密码是否一致 ,单独写了个方法 pwdEqual();
插件里的验证正则我只写了几个 ,如果不够用可以自行扩展添加。
扩展只需3步:
1.添加正则,
2.添加相应提示信息,
3.check()方法中添加相应 case 处理
插件使用说明:
1.给表单下要进行验证的文本框,密码框 ,多行文本框加上自定义check属性
2.多个格式验证用空格间隔,如(同时验证必填和邮箱): check="required email"
3.如果要验证两次密码是否一致,则pwd1和pwd2一起使用,如下图:
pwd1存储第一次输入的值,pwd2存储第二次输入的值,如果你只用pwd1还好。
但如果只用了pwd2,则验证是始终无法通过的。
下面给出DEMO示例代码:
<!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="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.similar.checkForm.js" type="text/javascript"></script>
<script type="text/javascript">
$("#myform").checkForm();
</script>
</body>
</html>
示例效果图片:
示例代码,成功提交是会跳转到success.html页面的,因此你要自己创建个success.html,里面可以什么都不写。
但是,只要有一个验证不通过,就不会成功跳转。
另外,你或许还需要2张图片:
//图片路径
img_error: "img/error.gif",
img_success: "img/success.gif",
上传在这了,自己右键另存为吧。
语文没学好,语言组织能力,及表达能力实在是欠缺。自己理解了,却无法很好的讲出来,无奈。
大家如果还有什么不明白的可以留言,或者对上面代码有什么建议的也请留言(讨论出最好结果),又或者发现了bug的,麻烦及时告知,谢谢!
自己编写jQuery插件之表单验证的更多相关文章
- Jquery插件easyUi表单验证提交
<form id="myForm" method="post"> <table align="center" style= ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jQuery常用插件与jQuery使用validation插件实现表单验证实例
jQuery常用插件 1,jQuery特别容易扩展,开发者可以基于jQuery开发一些扩展动能 2,插件:http://plugins.jquery.com 3,超厉害的插件:validation . ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- 异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
- jQuery Validation Engine 表单验证,自定义规则验证方法
jQuery Validation Engine 表单验证说明文档http://code.ciaoca.com/jquery/validation-engine/ js加到jquery.validat ...
- jquery.validation.js 表单验证
jquery.validation.js 表单验证 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
随机推荐
- [转帖]Oracle数据安全--校验Oracle安装软件的 SHA码 防范注入风险
Oracle数据安全--校验Oracle安装软件的 SHA码 防范注入风险 https://www.toutiao.com/i6723512458482303499/ certutil md5sums ...
- 内网环境下搭建maven私服小技巧
背景 最近接手一个其他公司的项目,因为工程中使用了maven,而且里面有很多他们自己封装很多自己的构件(就是jar.war等等),需要将他们maven私服迁移到我们的私服上去,因为网络环境不通,所以不 ...
- spring cloud微服务实践三
上篇文章里我们实现了spring cloud中的服务提供者和使用者.接下来我们就来看看spring cloud中微服务的其他组件. 注:这一个系列的开发环境版本为 java1.8, spring bo ...
- PHP trait介绍
Trait 自 PHP 5.4.0 起,PHP 实现了一种代码复用的方法,称为 trait. Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制.Trait 为了减少单继承语言的限制, ...
- (七)装配Bean(1)
针对给接口提供哪一个具体的实现,也就是装配哪一种具体的实现bean,在Spring中提供了多种方式,主要包括3种: 一.隐式的bean发现机制和自动装配(自动化装配bean) 二.在Java类中进行显 ...
- (二)Spring框架之JDBC的基本使用(p6spy插件的使用)
案例一: 用Spring IOC方式使用JDBC Test_2.java package jdbc; import java.lang.Thread.State; import java.sql.Co ...
- Java QuickSort 快速排序
Java QuickSort /** * <html> * <body> * <P> Copyright 1994-2018 JasonInternational ...
- 前端开发 Vue -0前言
Vue2.0 新手完全填坑攻略——从环境搭建到发布 Vue2 入门,读这篇就够了 Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.i ...
- Python练习_数据类型_day4
题目 1.作业 1,写代码,有如下列表,按照要求实现每一个功能 li = ["alex", "WuSir", "ritian", " ...
- linux内核信号量
用户态的信号量: System V 信号量 Posix 信号量 信号量是用于保护临界区的一种常用方法.它的使用和自旋锁类似.相同的是,只有得到信号量的进程才能执行临界区代码:不同的是,当获取不到信号量 ...