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 相关文章推荐
Dom与浏览器兼容性说明
Oct 25 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
Mar 10 Javascript
ajax与302响应代码测试
Oct 23 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
js中的数组对象排序分析
Dec 11 Javascript
Vue的编码技巧与规范使用详解
Aug 28 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 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
Terran兵种对照表
2020/03/14 星际争霸
php5.3 废弃函数小结
2010/05/16 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
PHP采集静态页面并把页面css,img,js保存的方法
2014/12/23 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
AJAX PHP无刷新form表单提交的简单实现(推荐)
2016/09/09 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
Vue中封装input组件的实例详解
2017/10/17 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python实现的一个火车票转让信息采集器
2014/07/09 Python
django的ORM操作 增加和查询
2019/07/26 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
解决python replace函数替换无效问题
2020/01/18 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
公司企业表扬信
2014/01/11 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
新闻发布会策划方案
2014/06/12 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
MySQL 如何分析查询性能
2021/05/12 MySQL
Python基础之函数嵌套知识总结
2021/05/23 Python
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python