jQuery简易表单验证插件（可链式操作）
2017-06-22 18:01
295 查看
一款简易的表单验证插件，第一次写这种插件还有很多不足，希望以后可以完善的更好，兼容为IE9+
效果预览：
文件压缩后的大小以及响应时间：
插件使用说明：
1. html基本结构
2. css以及js调用部分
3. 表单验证class说明
yz_form : 表单监听范围
yz_username : 验证中文、英文、数字但不包括下划线等符号
yz_password ： 验证中文、英文、数字但不包括下划线等符号,长度为6-15
yz_confirm : 验证中文、英文、数字但不包括下划线等符号,长度为6-15
yz_Email : 验证Email地址
yz_Mobile : 验证手机号码
yz_phone : 验证电话号码
yz_identityCard : 验证15到18位的身份证号码
html部分：
初始化文件：
主体样式less文件：
插件代码：
效果预览：
文件压缩后的大小以及响应时间：
插件使用说明：
1. html基本结构
<div class="yz_form"> <form action=""> <ul> <li> <span>用户名：</span> <input type="text" class="yz_username"/> </li> </ul> <input type="button" class="button" value="注册" /> </form> </div>
2. css以及js调用部分
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/yz_form.css""/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/yz_form-min.js"></script>
<script type="text/javascript">
$(function () {
$('.yz_form li').yzFrom({
fromClass : '.yz_form li',//监听元素
fromMsg_n : 'no_msg',//错误信息
fromMsg_y : 'yes_msg',//正确信息
triggerEvent : 'focus',//触发事件
overEvent : 'blur'//离开事件
});
});
</script>3. 表单验证class说明
yz_form : 表单监听范围
yz_username : 验证中文、英文、数字但不包括下划线等符号
yz_password ： 验证中文、英文、数字但不包括下划线等符号,长度为6-15
yz_confirm : 验证中文、英文、数字但不包括下划线等符号,长度为6-15
yz_Email : 验证Email地址
yz_Mobile : 验证手机号码
yz_phone : 验证电话号码
yz_identityCard : 验证15到18位的身份证号码
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--<link rel="stylesheet" type="text/css" href="css/normalize.css"/>-->
<link rel="stylesheet" type="text/css" href="css/yz_form.css""/>
</head>
<body>
<div class="yz_form">
<form action="">
<ul>
<li>
<span>用户名：</span>
<input type="text" class="yz_username"/>
</li>
<li>
<span>密码：</span>
<input type="text" class="yz_password"/>
</li>
<li>
<span>确认密码：</span>
<input type="text" class="yz_confirm"/>
</li>
<li>
<span>Email：</span>
<input type="text" class="yz_Email"/>
</li>
<li>
<span>手机号码：</span>
<input type="text" class="yz_Mobile"/>
</li>
<li>
<span>电话号码：</span>
<input type="text" class="yz_phone"/>
</li>
<li>
<span>身份证：</span>
<input type="text" class="yz_identityCard"/>
</li>
</ul>
<input type="button" class="button" value="注册" />
</form>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/yz_form.js"></script>
<script type="text/javascript">
$(function () {
$('.yz_form li').yzFrom({
fromMsg_n : 'no_msg',//错误信息
fromMsg_y : 'yes_msg',//正确信息
triggerEvent : 'focus',//触发事件
overEvent : 'blur'//离开事件
});
});
</script>
</body>
</html>初始化文件：
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
/* Document
========================================================================== */
html {
font-family: sans-serif; /* 1 */
line-height: 1.15; /* 2 */
-ms-text-size-adjust: 100%; /* 3 */
-webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}主体样式less文件：
*{
margin: 0;
padding: 0;
}
body{
background-color: #444444;
position: relative;
}
ul,li{
list-style-type: none;
}
.yz_form{
padding: 30px 45px 30px 30px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, 50%);
-ms-transform: translate(-50%, 50%);
-o-transform: translate(-50%, 50%);
-moz-transform: translate(-50%, 50%);
-webkit-transform: translate(-50%, 50%);
border-radius: 8px;
-ms-border-radius: 8px;
-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background-color: #FFFFFF;
form{
ul{
li{
position: relative;
margin-bottom: 15px;
&>span:nth-child(1){
display: inline-block;
width: 80px;
height: 35px;
line-height: 35px;
}
input{
width: 220px;
height: 35px;
line-height: 35px;
border: none;
border: 1px solid #666666;
padding: 0 5px;
font-size: 12px;
color: #B5B5B5;
}
.msg{
display: inline-block;
position: absolute;
right: -35px;
top: 3px;
height: 25px;
width: 25px;
background-size: 25px 25px;
}
.no_msg{
background-image: url(../css/no.svg);
}
.yes_msg{
background-image: url(../css/yes.svg);
}
}
}
.button{
display: block;
border: none;
background-color: #808080;
width: 230px;
height: 35px;
line-height: 35px;
margin-left: 86px;
&:hover{
cursor: pointer;
}
}
}
}插件代码：
;(function($){
//定义插件的名称，这里为yzFrom
$.fn.yzFrom = function (options) {
//配置默认参数
var defaults = {
fromMsg_n : 'no_msg',//错误信息
fromMsg_y : 'yes_msg',//正确信息
triggerEvent : 'focus',//触发事件
overEvent : 'blur'//离开事件
};
//将默认值和传入的参数进行合并
var ops = $.extend(defaults,options);
//返回jQuery对象，使其可以链式操作
return this.each(function () {
//获取所有input类名
var yz_input = $(this).find('input').attr('class');
//设置提示输入语
switch(yz_input){
case 'yz_username':
$(this).find('input').val('不允许下划线等符号');
break;
case 'yz_password':
$(this).find('input').val('不允许下划线等符号,密码长度6-15');
break;
case 'yz_confirm':
$(this).find('input').val('不允许下划线等符号,密码长度6-15');
break;
case 'yz_Email':
$(this).find('input').val('请输入正确的Email');
break;
case 'yz_Mobile':
$(this).find('input').val('请输入正确的手机号码');
break;
case 'yz_phone':
$(this).find('input').val('请输入正确的电话号码');
break;
case 'yz_identityCard':
$(this).find('input').val('请输入正确的身份证号码');
break;
}
$(this).find('input').bind(ops.triggerEvent,function () {
function fromMessage(fromValue,_this){
if (fromValue) {
_this.parent('li').find(ops.fromMsg_n).remove();
_this.parent('li').append('<span class="msg"></span>');
_this.parent('li').find('.msg').addClass(ops.fromMsg_y);
}else{
_this.parent('li').find('.yes_msg').remove();
_this.parent('li').append('<span class="msg"></span>');
_this.parent('li').find('.msg').addClass(ops.fromMsg_n);
}
}
//获得焦点清空input框中的值
$(this).val('');
//设置正则验证
switch(yz_input){
case 'yz_username':
$(this).bind(ops.overEvent,function () {
var _thisValue = $(this).val();
var pattern = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
fromMessage(pattern.test(_thisValue),$(this));
});
break;
case 'yz_password':
$(this).bind(ops.overEvent,function () {
var _thisValue = $(this).val();
var pattern = /^[\u4E00-\u9FA5A-Za-z0-9]+.{6,15}$/;
fromMessage(pattern.test(_thisValue),$(this));
});
break;
case 'yz_confirm':
$(this).bind(ops.overEvent,function () {
var _thisValue = $(this).val();
var passwrod = $('.yz_password').val();
var pattern = /^[\u4E00-\u9FA5A-Za-z0-9]+.{6,15}$/;
fromMessage(_thisValue === passwrod && _thisValue != '' && pattern.test(_thisValue),$(this));
$('.yz_confirm').bind("click",function(e){
if($(e.target).closest(".yz_confirm").length == 0){
fromMessage(_thisValue === passwrod && _thisValue != '' && pattern.test(_thisValue),$(this));
}
});
});
break;
case 'yz_Email':
$(this).bind(ops.overEvent,function () {
var _thisValue = $(this).val();
var pattern = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
fromMessage(pattern.test(_thisValue),$(this));
});
break;
case 'yz_Mobile':
$(this).bind(ops.overEvent,function () {
var _thisValue = $(this).val();
var pattern = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
fromMessage(pattern.test(_thisValue),$(this));
});
break;
case 'yz_phone':
$(this).bind(ops.overEvent,function () {
var _thisValue = $(this).val();
var pattern = /\d{3}-\d{8}|\d{4}-\d{7}/;
fromMessage(pattern.test(_thisValue),$(this));
});
break;
case 'yz_identityCard':
$(this).bind(ops.overEvent,function () {
var _thisValue = $(this).val();
var pattern = /^\d{15}|\d{18}$/;
fromMessage(pattern.test(_thisValue),$(this));
});
break;
}
});
});
}
})(jQuery);
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 简易JQuery表单验证插件
- jQuery formValidator表单验证插件(详解)
- jQuery表单验证插件即将奉上
- jQuery 表单验证插件formValidation实现个性化错误提示
- jQuery插件Validation验证表单实现javascript表单智能验证功能
- jQuery表单验证插件
- jQuery formValidator表单验证插件
- jQuery 表单验证插件formValidation实现个性化错误提示
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- jQuery的表单验证插件
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
- 基于jQuery的表单验证插件
- [转摘]jQuery formValidator表单验证插件开源了!!含API帮助、源码、示例
- jquery 表单验证插件
- jQuery formValidator表单验证插件2.9.3版本已经支持对所有客户端控件的验证
- jQuery formValidator表单验证插件2.9.3版本已经支持对所有客户端控件的验证