本文实例为大家分享了封装jquery简易验证插件的具体代码，供大家参考，具体内容如下
html代码：
jQuery数据校验插件开发
css部分
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
ul li {
list-style: none;
position: relative;
}
input {
outline: 0;
}
.format-input {
display: inline-block;
width: 84%;
height: 35px;
padding: 0 0 0 3px;
border: 1px solid #fff;
vertical-align: baseline;
}
:focus {
outline: 4px solid #007fff;
}
html,
body {
width: 100%;
height: 100%;
}
body {
min-height: 100%;
font: 12px/1.5 'Microsoft YaHei', arial, sans-serif;
background: url(../image/bj.jpg) no-repeat;
background-size: cover;
overflow: hidden;
}
.register-wrap {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 450px;
height: 415px;
margin: auto;
background: rgba(0, 0, 0, 0.5);
}
.register {
width: 100%;
height: 100%;
padding: 20px 30px;
color: #fff;
}
.register > ul > li {
font-size: 0;
margin: 0 0 20px 0;
}
.register > ul > li label {
display: inline-block;
width: 16%;
font-size: 12px;
}
.submit-btn {
border: 1px solid transparent;
font-size: 18px;
font-weight: bold;
color: #fff;
background: #51a8ff;
box-shadow: 1px 1px #AFC4EA,
2px 2px #AFC4EA,
3px 3px #AFC4EA;
}
.submit-btn:hover {
cursor: pointer;
}
.submit-btn:focus {
outline: none;
border: 1px solid #f0f3f9;
}
.submit-btn:active {
border: 1px solid #f0f3f9;
transform: translate(1px, 1px);
box-shadow: 1px 1px #AFC4EA,
2px 2px #AFC4EA;
}
提示错误的tips样式：
.validate-error-tip {
position: absolute;
top: 0;
left: 0;
display: table;
min-width: 150px;
min-height: 35px;
font-size: 12px;
border: 1px solid lightblue;
padding: 5px;
background: #fff;
color: #666;
z-index: 9999;
}
.validate-error-tip:before {
position: absolute;
top: 0;
left: -15px;
display: block;
content: '';
width: 0;
height: 0;
border-color: transparent lightblue transparent transparent;
/*1、下边框有颜色 对应着上边框没有宽度,是正三角形；2、上边框有颜色 对应着下边框没宽度，是倒三角形*/
border-style: solid;
border-width: 15px 15px 15px 0;
}
javascript部分：
(function($, factory, pluginName) {
factory($, pluginName);
})(jQuery, function($, pluginName){
//插件默认配置项
var __DEFAULT__ = {
//默认触发验证的事件为input事件
initEvent: 'input',
prefix: 'vt' //自定义属性前缀
};
//插件内部编写校验规则
var __RULES__ = {
//正则
regexp: function(ruleData) {
return new RegExp(ruleData).test(this.val());
},
//必填项
required: function(ruleData) {
return $.trim(this.val()).length > 0;
},
//最小值
minLength: function(ruleData) {
return $.trim(this.val()).length > ruleData ;
},
//最大值
maxLength: function(ruleData) {
return $.trim(this.val()).length < ruleData;
},
//验证两次密码是否一致
isEquals: function(ruleData) {
var pwd = $(':password').eq(0); //$(':password')[0]是什么对象呢？
return pwd.val() === this.val();
},
//是否是邮箱
isEmail: function(ruleData) {
return /\w+@\w+\..+/g.test(this.val());
},
//是不是手机号
isPhone: function(ruleData) {
return /^1\d{10}$/g.test(this.val());
},
//是不是座机号码
isTel: function(ruleData) {
return /^0\d{2,3}-\d{7,8}$/g.test(this.val());
}
};
$.fn[pluginName] = function(options) {
//标识是否提交表单
var $this = this;
if(!$this.is('form')) { return; }
//this: 这里的this是jQuery实例对象
$this.$file = $this.find('input:not([type="button"][type="submit"])'); //给当前实例对象(也就是调用该插件的jquery对象)添加一个$file的属性
$.extend($this, __DEFAULT__, options); //以默认配置为优先，以用户配置为覆盖
//格式化rule规则。
// 将一个字符串在每一个大写字母前加上一个'-',并且全部转为小写
// vtEmailMsg > vt-email-msg
$this.formatRule = function(str, connector) {
if(typeof str !== 'string') {
return str;
}
//使用replace、正则(匹配单个大写字母)
str = str.replace(/[A-Z]/g,function(match, index) {
if(index === 0) { return match.toLowerCase() }
return connector + match.toLowerCase();
});
return str;
};
//显示错误信息
$this.showErrorTip = function(errorMsg) {
var $tip = $("
offset = this.position(),
elHeight = this.outerHeight(),
elWidth = this.outerWidth();
if(this.siblings('.validate-error-tip').length > 0){
this.siblings('.validate-error-tip').eq(0).text(errorMsg).show();
} else {
$tip.text(errorMsg).
css({
top: offset.top,
left: offset.left + elWidth + 15,
width: $tip.width()
});
this.after($tip);
$tip.show();
}
};
//监听form表单里所有的input的事件
$this.$file.on(this.initEvent, function(){
var $input = $(this);
//清除错误提示框
$input.siblings('.validate-error-tip').remove();
//注意这里是循环的我们插件的规则，而不是用户拥有的规则
$.each(__RULES__, function(key, fn) {
var rule = '',
errorMsg = '';
//如果key是以is字符开头、则去掉is
if(key.indexOf('is') === 0) {
key = key.slice(2);
}
key = $this.formatRule(key, '-'); //将规则格式化为html中书写的形式
rule = $input.data(__DEFAULT__.prefix + '-' + key); //获取规则的值
errorMsg = $input.data(__DEFAULT__.prefix + '-' + key + '-msg'); //规则对应的提示信息
//如果当前input有这个规则，则执行这个规则
if(rule) {
//执行规则测试是否通过
var isPassed = fn.call($input, rule); //改变规则函数fn执行时候的this，指向当前input jquery对象
if(!isPassed) {
//未通过、则错误提示
$this.showErrorTip.call($input, errorMsg);
}
}
});
});
//绑定提交表单的事件
this.on('submit', function(e) {
var isFormPassed = true;
$this.$file.trigger($this.initEvent);
$this.$file.each(function(index, current){
var $current = $(current);
if($current.siblings('.validate-error-tip').is(':visible')){
isFormPassed = false;
return false;
}
});
if(!isFormPassed) {
return isFormPassed;
}
});
};
//扩展新的验证规则(实际上就是扩展上面__RULES__对象)
$.fn[pluginName].addRule = function(options) {
$.extend(__RULES__, options);
}
}, 'formValidate');
更多内容请参考《jquery表单验证大全》 ，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。