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 相关文章推荐
ajax与302响应代码测试
Oct 23 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
JavaScript制作颜色反转小游戏
Sep 25 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
基于JavaScript实现带缩略图的轮播效果
Jan 12 Javascript
详解vue项目构建与实战
Jun 27 Javascript
vue组件与复用详解
Apr 08 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
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
探讨如何把session存入数据库
2013/06/07 PHP
PHP判断文章里是否有图片的简单方法
2014/07/26 PHP
php按单词截取字符串的方法
2015/04/07 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
Yii 框架控制器创建使用及控制器响应操作示例
2019/10/14 PHP
JavaScript splice()方法详解
2020/09/22 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
JS实现页面鼠标点击出现图片特效
2020/08/19 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
使用Keras实现Tensor的相乘和相加代码
2020/06/18 Python
文秘档案管理岗位职责
2014/03/06 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
应聘教师求职信范文
2015/03/20 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
如何书写民事调解协议书?
2019/06/25 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang