首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jquery实现简易验证插件封装

Posted in jQuery onSeptember 13, 2020

本文实例为大家分享了封装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>
 <form method="post" action="result.html" ac id="register">
 <div class="register-wrap">
 <div class="register">
 <ul>
 <li>
 <label for="username">用户名：</label>
 <input type="text" id="username" name="username" tabindex="1" class="format-input" placeholder="请输入用户名" data-vt-required-msg="用户名不能为空" data-vt-regexp-msg="用户名必须是以字母、数字、下划线组成,且不能以数字开头(6-20位)" data-vt-required=true data-vt-regexp='^[\w_]\w{5,19}$' autofocus>
 </li>
 <li>
 <label for="pwd">密码：</label>
 <input type="password" id="pwd" name="password" tabindex="2" class="format-input" 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>
 <li>
 <label for="confirmPwd">确认密码：</label>
 <input type="password" id="confirmPwd" name="password" tabindex="3" class="format-input" placeholder="请再次输入密码" data-vt-required=true data-vt-required-msg="密码不能为空" data-vt-equals=true data-vt-equals-msg="两次密码不一致">
 </li>
 <li>
 <label for="phone">手机号：</label>
 <input type="text" id="phone" name="phone" tabindex="4" class="format-input" placeholder="请输入手机号" data-vt-required=true data-vt-phone=true data-vt-required-msg="手机号不能为空" data-vt-phone-msg="手机号不合法">
 </li>
 <li>
 <label for="tel">座机：</label>
 <input type="text" id="tel" name="tel" tabindex="5" class="format-input" placeholder="请输入座机号码" data-vt-required=true data-vt-tel=true data-vt-required-msg="座机号不能为空" data-vt-tel-msg="座机号不合法">
 </li>
 <li>
 <label for="email">邮箱：</label>
 <input type="text" id="email" name="email" tabindex="6" class="format-input" placeholder="请输入邮箱地址" data-vt-required=true data-vt-email=true data-vt-required-msg="邮箱不能为空" data-vt-email-msg="邮箱不合法" >
 </li>
 <li>
 <label for="submitBtn"></label>
 <input type="submit" value="注册" id="submitBtn" tabindex="7" class="format-input submit-btn">
 </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;
 
}

提示错误的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 = $("<div class='validate-error-tip'> </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');

jquery实现简易验证插件封装

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

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

jquery实现简易验证插件封装

- Author -

啊哈！前端

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery EasyUI之验证框validatebox实例详解
Apr 10 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
Vue中正确使用jQuery的方法
Oct 30 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
jQuery使用each遍历循环的方法
Sep 19 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
jQuery实现朋友圈查看图片
Sep 11 #jQuery
jQuery实现日历效果
Sep 11 #jQuery
jquery实现简单每周轮换的日历
Sep 10 #jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 #jQuery
jQuery实现简单三级联动效果
Sep 05 #jQuery
如何基于jQuery实现五角星评分
Sep 02 #jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 #jQuery
默认端口(3) 反向代理(2) shell(3) 防盗链(1) 生成缩略图(1) http(6) reload(1) 负载均衡(6) 前后端分离(1) 动静分离(1)
You might like
PHP include_path设置技巧分享
2011/07/03 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP+Redis开发的书签案例实战详解
2019/07/09 PHP
js innerHTML 的一些问题的解决方法
2008/06/22 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
JavaScript高级程序设计（第三版）学习笔记6、7章
2016/03/11 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
利用JS hash制作单页Web应用的方法详解
2017/10/10 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
微信小程序服务器日期格式化问题
2020/01/07 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
JS如何操作DOM基于表格动态展示数据
2020/10/15 Javascript
浅谈Python NLP入门教程
2017/12/25 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
Django REST framework视图的用法
2019/01/16 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
Python脚本调试工具安装过程
2021/01/11 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
三星加拿大官方网上商店：Samsung CA
2020/12/18 全球购物
零件设计自荐信范文
2013/11/27 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
法学专业毕业实习自我鉴定2014
2014/09/27 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers