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 相关文章推荐
北京奥运官方网站幻灯切换效果flash版打包下载
Jan 30 Javascript
js 异步处理进度条
Apr 01 Javascript
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
Javascript中查找不以XX字符结尾的单词示例代码
Oct 15 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
JavaScript实现标题栏文字轮播效果代码
Oct 24 Javascript
简单谈谈javascript中this的隐式绑定
Feb 22 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
微信小程序实现美团菜单
Jun 06 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
vue+elementUI实现简单日历功能
Sep 24 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
基于wordpress主题制作的具体实现步骤
2013/05/10 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
webpack学习笔记之优化缓存、合并、懒加载
2017/08/24 Javascript
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
javascript实现简易的计算器
2020/01/17 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Django用户认证系统 组与权限解析
2019/08/02 Python
Python代码块及缓存机制原理详解
2019/12/13 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Python如何发送与接收大型数组
2020/08/07 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
python opencv实现图像配准与比较
2021/02/09 Python
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
俄罗斯香水和化妆品在线商店:Aroma-butik
2020/02/28 全球购物
生产车间实习自我鉴定
2013/09/23 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
个人求职信范例
2014/01/29 职场文书
三年级数学教学反思
2014/01/31 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
对Golang中的FORM相关字段理解
2021/05/02 Golang
js Proxy的原理详解
2021/05/25 Javascript
Python标准库之typing的用法(类型标注)
2021/06/02 Python
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript