jQuery验证插件validation使用指南


Posted in Javascript onApril 21, 2015

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

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   as text for IE
      label.html(" ").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"> </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/

Javascript 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
JS 密码强度验证(兼容IE,火狐,谷歌)
Mar 15 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
详解Vue方法与事件
Mar 09 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
Mar 13 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 #Javascript
jQuery弹出层插件Lightbox_me使用指南
Apr 21 #Javascript
jQuery提示插件alertify使用指南
Apr 21 #Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 #Javascript
Jquery遍历Json数据的方法
Apr 20 #Javascript
javascript判断变量是否有值的方法
Apr 20 #Javascript
javascript实现校验文件上传控件实例
Apr 20 #Javascript
You might like
一个MYSQL操作类
2006/11/16 PHP
PHP Smarty生成EXCEL文档的代码
2008/08/23 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
js 调整select 位置的函数
2008/02/21 Javascript
jquery插件jbox使用iframe关闭问题
2009/02/09 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
js实现正则匹配中文标点符号的方法
2015/12/23 Javascript
js表单验证实例讲解
2016/03/31 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
python插入排序算法实例分析
2015/07/03 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
实例代码讲解Python 线程池
2020/08/24 Python
html5 canvas手势解锁源码分享
2020/01/07 HTML / CSS
法国二手MacBook销售网站:Okamac
2019/03/18 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
怎么样写好简历中的自我评价
2013/10/25 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
2014年度培训工作总结
2014/11/27 职场文书
保研导师推荐信
2015/03/25 职场文书