脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery验证插件validation使用指南

jQuery验证插件validation使用指南

 更新时间：2015年04月21日 10:26:05   投稿：hebedich  
jquery.validation.js在前端验证中使用起来非常方便,提供的功能基本上能满足大部分验证需求，下面我们就来仔细研究下这款jQuery插件的具体使用方法。

在网站开发过程中，有时我们需要验证用户输入的信息是否符合我们的要求，所以我们会对用户提交的数据进行验证。验证分两次进行，一次是在客户端，一次是在服务端。客户端的验证可以提升用户的体验。

jquery验证插件有很多，实现的功能也基本相同。本文介绍的只是jquery验证插件中的一种jquery.validate

jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性。

1.jquery.validate插件功能

简单实现客户端信息验证，过滤不符合要求的信息

2.jquery.validate官方地址

官方地址：http://jqueryvalidation.org/,有详细的插件使用说明

官方demo：http://jquery.bassistance.de/validate/demo/

3.jquery.validate使用方法

1.引用js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

2.css样式，可自定义，简单的只需要添加error样式，也可使用官方demo中的样式。

.error{
  color:red;
  margin-left:8px;
}

3.js代码

$(document).ready(function() {
  // validate signup form on keyup and submit
  var validator = $("#signupform").validate({
    rules: {
      firstname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      password_confirm: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true,
      },
      dateformat: "required",
      terms: "required"
    },
    messages: {
      firstname: "姓名不能为空",
      username: {
        required: "用户名不能为空",
        minlength: jQuery.format("用户名只少由 {0} 字符组成")
      },
      password: {
        required: "密码不能为空",
        minlength: jQuery.format("密码只少由 {0} 字符组成")
      },
      password_confirm: {
        required: "确认密码不能为空",
        minlength: jQuery.format("确认密码只少由 {0} 字符组成"),
        equalTo: "秘密与确认密码不一致"
      },
      email: {
        required: "邮箱不能为空",
        email: "邮箱格式不正确"
      },
      dateformat: "请选择性别",
      terms: " "
    },
    // the errorPlacement has to take the table layout into account
    errorPlacement: function(error, element) {
      if ( element.is(":radio") )
        error.appendTo( element.parent().next().next());
      else if ( element.is(":checkbox") )
        error.appendTo ( element.next());
      else
        error.appendTo( element.parent().next());
    },
    // specifying a submitHandler prevents the default submit, good for the demo
    submitHandler: function() {
      alert("submitted!");
    },
    // set this class to error-labels to indicate valid fields
    success: function(label) {
      // set &nbsp; as text for IE
      label.html("&nbsp;").addClass("checked");
    },
    highlight: function(element, errorClass) {
      $(element).parent().next().find("." + errorClass).removeClass("checked");
    }
  });
});

以上的代码只使用了插件提供的属性和方法。也可以自定义验证方法。如

$.validator.addMethod("checkUserName", function(value) {

    //value为验证的值，对应于元素id

  //方法代码

}, '用户名格式不正确');

使用自定义方法也非常简单，只需要 元素id:”checkUserName”

4.使用的html

<form id="signupform" autocomplete="off" method="get" action="">
   <table>
   <tr>
    <td class="label"><label id="lfirstname" for="firstname">姓名</label></td>
    <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lusername" for="username">用户名</label></td>
    <td class="field"><input id="username" name="username" type="text" value="" maxlength="50" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lpassword" for="password">密码</label></td>
    <td class="field"><input id="password" name="password" type="password" maxlength="50" value="" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lpassword_confirm" for="password_confirm">确认密码</label></td>
    <td class="field"><input id="password_confirm" name="password_confirm" type="password" maxlength="50" value="" /></td>
    <td class="status"></td>
   </tr>
   <tr>
    <td class="label"><label id="lemail" for="email">邮箱</label></td>
    <td class="field"><input id="email" name="email" type="text" value="" maxlength="150" /></td>
    <td class="status"></td>
   </tr>
         <tr>
    <td class="label"><label>性别</label></td>
    <td class="field" colspan="2" style="vertical-align: top; padding-top: 2px;">
    <table>
    <tbody>

    <tr>
      <td style="padding-right: 5px;">
        <input id="sex_men" name="dateformat" type="radio" value="0" />
        <label id="lbl_sex_men" for="dateformat_eu">男</label>
      </td>
      <td style="padding-left: 5px;">
        <input id="sex_women" name="dateformat" type="radio" value="1" />
        <label id="lbl_sex_women" for="dateformat_am">女</label>
      </td>
      <td>
      </td>
    </tr>
    </tbody>
    </table>
    </td>
   </tr>

   <tr>
    <td class="label">&nbsp;</td>
    <td class="field" colspan="2">
      <div id="termswrap">
        <input id="terms" type="checkbox" name="terms" />
        <label id="lterms" for="terms">以阅读并同意网站条款.</label>
      </div> <!-- /termswrap -->
    </td>
   </tr>
   <tr>
    <td class="label"></td>
    <td class="field" colspan="2">
    <input id="signupsubmit" name="signup" type="submit" value="注册" />
    </td>
   </tr>

   </table>
</form>

更多验证方法的应用请查看http://jqueryvalidation.org/

您可能感兴趣的文章:

相关文章

  • jQuery实现鼠标滚动图片延迟加载效果附源码下载

    jQuery实现鼠标滚动图片延迟加载效果附源码下载

    本文给大家分享jquery技术实现图片延时加载效果，本特效没有使用专门的图片延迟加载插件，只需要一小段jQuery代码就实现了图片延迟加载，使用非常方便，需要的朋友可以下载源码
    2016-06-06
  • jQuery获取cookie值及删除cookie用法实例

    jQuery获取cookie值及删除cookie用法实例

    这篇文章主要介绍了jQuery获取cookie值及删除cookie用法,实例分析了jQuery操作cookie时域和路径的作用,以及针对cookie的读取与删除技巧,需要的朋友可以参考下
    2016-04-04
  • jquery中$each()方法的使用指南

    jquery中$each()方法的使用指南

    jQuery 中的each函数 很方便,$.each ()函数封装了十分强大的遍历功能，它可以遍历一维数组、多维数组、DOM , JSON 等等，在javaScript 开发过程中使用$each可以大大的减轻我们的工作量,这里贴一个简单的模仿each的函数,只能处理数组类型的对象。
    2015-04-04
  • 基于jQuery实现响应式圆形图片轮播特效

    基于jQuery实现响应式圆形图片轮播特效

    这篇文章主要介绍了基于jQuery实现响应式圆形图片轮播特效，mislider插件可以将图片以圆形图片显示，然后使图片无限循环形成轮播图或旋转木马特效，感兴趣的小伙伴们可以参考一下
    2015-11-11
  • jquery 表单下所有元素的隐藏

    jquery 表单下所有元素的隐藏

    jquery 表单下所有元素的隐藏，不用增加额外的div是个不错的方法。
    2009-07-07
  • jquery广告无缝轮播实例

    jquery广告无缝轮播实例

    这篇文章主要为大家详细介绍了jquery广告无缝轮播实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jQuery javaScript捕获回车事件(示例代码)

    jQuery javaScript捕获回车事件(示例代码)

    jQuery javaScript捕获回车事件(示例代码)。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • JQuery中SetTimeOut传参问题探讨

    JQuery中SetTimeOut传参问题探讨

    无论是window.setTimeout还是window.setInterval，在使用函数名作为调用句柄时都不能带参数，解决办法是在此函数的基础上在做一层封装
    2013-05-05
  • jQuery.event兼容各浏览器的event详细解析

    jQuery.event兼容各浏览器的event详细解析

    jQuery在遵循W3C规范的情况下，对事件的常用属性进行了封装，使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断
    2013-12-12
  • Jquery对新插入的节点 绑定Click事件失效的解决方法

    Jquery对新插入的节点 绑定Click事件失效的解决方法

    下面小编就为大家带来一篇Jquery对新插入的节点 绑定Click事件失效的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06

最新评论