好资源导航 » 文章资讯 » jquery实现简易验证插件封装

jquery实现简易验证插件封装

2023-07-16 19:16:03 78

本文实例为大家分享了封装jquery简易验证插件的具体代码，供大家参考，具体内容如下

html代码：





jQuery数据校验插件开发











用户名：



密码：



确认密码：



手机号：



座机：



邮箱：

css部分

*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
ulli{
list-style:none;
position:relative;
}
input{
outline:0;
}
.format-input{
display:inline-block;
width:84%;
height:35px;
padding:0003px;
border:1pxsolid#fff;
vertical-align:baseline;
}
:focus{
outline:4pxsolid#007fff;
}
html,
body{
width:100%;
height:100%;
}
body{
min-height:100%;
font:12px/1.5'MicrosoftYaHei',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:20px30px;
color:#fff;
}
.register>ul>li{
font-size:0;
margin:0020px0;
}
.register>ul>lilabel{
display:inline-block;
width:16%;
font-size:12px;
}
.submit-btn{
border:1pxsolidtransparent;
font-size:18px;
font-weight:bold;
color:#fff;
background:#51a8ff;
box-shadow:1px1px#AFC4EA,
2px2px#AFC4EA,
3px3px#AFC4EA;
}
.submit-btn:hover{
cursor:pointer;
}
.submit-btn:focus{
outline:none;
border:1pxsolid#f0f3f9;
}
.submit-btn:active{
border:1pxsolid#f0f3f9;
transform:translate(1px,1px);
box-shadow:1px1px#AFC4EA,
2px2px#AFC4EA;

}

提示错误的tips样式：

.validate-error-tip{
position:absolute;
top:0;
left:0;
display:table;
min-width:150px;
min-height:35px;
font-size:12px;
border:1pxsolidlightblue;
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:transparentlightbluetransparenttransparent;
/*1、下边框有颜色对应着上边框没有宽度,是正三角形；2、上边框有颜色对应着下边框没宽度，是倒三角形*/
border-style:solid;
border-width:15px15px15px0;
}

javascript部分：

(function($,factory,pluginName){

factory($,pluginName);

})(jQuery,function($,pluginName){

//插件默认配置项
var__DEFAULT__={

//默认触发验证的事件为input事件
initEvent:'input',
prefix:'vt'//自定义属性前缀
};

//插件内部编写校验规则
var__RULES__={

//正则
regexp:function(ruleData){
returnnewRegExp(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()).lengthvt-email-msg
$this.formatRule=function(str,connector){

if(typeofstr!=='string'){
returnstr;
}

//使用replace、正则(匹配单个大写字母)
str=str.replace(/[A-Z]/g,function(match,index){
if(index===0){returnmatch.toLowerCase()}
returnconnector+match.toLowerCase();
});
returnstr;
};

//显示错误信息
$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){ varrule='', 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){ //执行规则测试是否通过 varisPassed=fn.call($input,rule);//改变规则函数fn执行时候的this，指向当前inputjquery对象 if(!isPassed){ //未通过、则错误提示 $this.showErrorTip.call($input,errorMsg); } } }); }); //绑定提交表单的事件 this.on('submit',function(e){ varisFormPassed=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; returnfalse; } }); if(!isFormPassed){ returnisFormPassed; } }); }; //扩展新的验证规则(实际上就是扩展上面__RULES__对象) $.fn[pluginName].addRule=function(options){ $.extend(__RULES__,options); } },'formValidate');

更多内容请参考《jquery表单验证大全》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jquery实现简易验证插件封装

热门推荐

随机推荐