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>
  <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表单验证大全》，欢迎大家学习阅读。

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

赞 (0)

相关推荐

  • Jquery表单验证插件formValidator使用方法

    Jquery表单验证插件formValidator使用方法

    使用步骤: 1.首先在项目中添加必备js与css 2.代码中添加引用(必备引用) <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type="text

  • jQuery验证插件 Validate详解

    jQuery验证插件 Validate详解

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • jQuery formValidator表单验证插件开源了 含API帮助、源码、示例

    2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态. 这个bug已经修复,请重新下载. 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1.为inputValidator增加empty属性.用于设置控件文本值是否允许两边为空.具体请看demo1里的密码的校验代码. 该属性是个对象,默认值{leftempty:true,rightempty:tr

  • jQuery 验证插件 Web前端设计模式(asp.net)

    设计目标:建立一个基于jQuery框架的通用Web验证插件... 设计要求:1.需要漂亮的css样式及小图标的润饰... 2.基于jQuery框架... 3.调用.net Web 服务来实现与数据库的异步交互... 解决方案:1.首先,我们来设计三个类,分别用来显示Web给用户的视觉感知.它们分别是 .msg_warning{font-family:Arial,Helvetica,sans-serif,simsun; background:#e7f7ff url(register/MsgWarn

  • jQuery Validate表单验证插件 添加class属性形式的校验

    jQuery Validate表单验证插件 添加class属性形式的校验

    本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下 效果如下: 一.jQuery表单验证插件,添加class属性形式的校验 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----添加cla

  • jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery表单验证插件（jquery.validate.js）的3种使用方式

    jquery  验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery  插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq

  • jQuery验证插件validation使用指南

    在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验证插件有很多,实现的功能也基本相同.本文介绍的只是jquery验证插件中的一种jquery.validate jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性. 1.jquery.validate插件功能 简单

  • jQuery验证插件validate使用方法详解

    jQuery验证插件validate使用方法详解

    1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页

  • jQuery表单验证插件formValidator(改进版)

    枚举对象的使用: 复制代码 代码如下: //各种验证方式支持的标签类型 sustainType: function (elem, setting) { var srcTag = elem.tagName; var stype = elem.type; switch (setting.validatetype) { case _validTypeEnum.InitValidator: return true; case _validTypeEnum.InputValidator: if (srcT

  • jQuery 表单验证插件formValidation实现个性化错误提示

    jQuery 表单验证插件formValidation实现个性化错误提示

    其效果图如下:使用说明 需要使用jQuery库文件和formValidation库文件[下载实例代码] http://jquery.com/ 同时需要自定义显示提示错误信息的CSS样式 使用实例 一,包含文件部分 复制代码 代码如下: <script src="jquery.js" type="text/javascript"></script> <script src="jquery.validationEngine.js&

随机推荐