线上抢答小程序_jquery完成简易验证插件封装

jquery实现简易验证插件封装     !前端   这篇文章主要为大家详细介绍了jquery实现简易验证插件的封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

html代码:

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 title jQuery数据校验插件开发 /title 
 link rel="stylesheet" href="css/register.css" / 
 link rel="stylesheet" href="css/validate.css" / 
 /head 
 body 
 main 
 section 
 " ac id="register" 
 div 
 div 
 label for="username" 用户名: /label 
 input type="text" id="username" name="username" tabindex="1" placeholder="请输入用户名" data-vt-required-msg="用户名不能为空" data-vt-regexp-msg="用户名必须是以字母、数字、下划线组成,且不能以数字开头(6-20位)" data-vt-required=true data-vt-regexp='^[\w_]\w{5,19}$' autofocus 
 /li 
 label for="pwd" 密码: /label 
 input type="password" id="pwd" name="password" tabindex="2" placeholder="请输入密码" data-vt-required=true data-vt-regexp="^[a-zA-Z_][\w_]{5,11}$" data-vt-required-msg="密码不能为空" data-vt-regexp-msg="密码必须是由字母、数字、下划线组成,且不能以数字开头(6-12位)" 
 /li 
 label for="confirmPwd" 确认密码: /label 
 input type="password" id="confirmPwd" name="password" tabindex="3" placeholder="请再次输入密码" data-vt-required=true data-vt-required-msg="密码不能为空" data-vt-equals=true data-vt-equals-msg="两次密码不一致" 
 /li 
 label for="phone" 手机号: /label 
 input type="text" id="phone" name="phone" tabindex="4" placeholder="请输入手机号" data-vt-required=true data-vt-phone=true data-vt-required-msg="手机号不能为空" data-vt-phone-msg="手机号不合法" 
 /li 
 label for="tel" 座机: /label 
 input type="text" id="tel" name="tel" tabindex="5" placeholder="请输入座机号码" data-vt-required=true data-vt-tel=true data-vt-required-msg="座机号不能为空" data-vt-tel-msg="座机号不合法" 
 /li 
 label for="email" 邮箱: /label 
 input type="text" id="email" name="email" tabindex="6" placeholder="请输入邮箱地址" data-vt-required=true data-vt-email=true data-vt-required-msg="邮箱不能为空" data-vt-email-msg="邮箱不合法" 
 /li 
 label for="submitBtn" /label 
 input type="submit" value="注册" id="submitBtn" tabindex="7" 
 /li 
 /ul 
 /div 
 /div 
 /form 
 /section 
 /main 
 script src="js/jquery2.0.js" /script 
 script src="js/formValidate.js" /script 
 script 
 $(function(){
 $('#register').formValidate();
 /script 
 /body 
 /html 

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;
}

提示错误的ti凡科抠图样式:

.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 
 //最小值
 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 = $(" div /div "),
 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');

更多内容请参考,欢迎大家学习阅读。

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


相关阅读