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 相关文章推荐
完美解决JS中汉字显示乱码问题(已解决)
Dec 27 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
JS模拟键盘打字效果的方法
Aug 05 Javascript
Jquery获取第一个子元素简单实例
Jun 02 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
详解微信小程序开发之下拉刷新 上拉加载
Nov 24 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
JavaScript闭包和回调详解
Aug 09 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
vue.js 图片上传并预览及图片更换功能的实现代码
Aug 27 Javascript
node.js调用C++函数的方法示例
Sep 21 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
php异步多线程swoole用法实例
2014/11/14 PHP
php实现的用户查询类实例
2015/06/18 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
jquery实现商品拖动选择效果代码(自写)
2013/05/28 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
深入理解js中this的用法
2016/05/28 Javascript
node网页分段渲染详解
2016/09/05 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
python查找第k小元素代码分享
2013/12/18 Python
Python迭代用法实例教程
2014/09/08 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
浅谈Python的异常处理
2016/06/19 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
校本教研工作制度
2014/01/22 职场文书
大学校运会广播稿
2014/02/03 职场文书
护校行动方案
2014/05/31 职场文书
大学毕业生推荐信
2014/07/09 职场文书
大三学年自我鉴定范文(3篇)
2014/09/28 职场文书
一年级小学生评语大全
2014/12/25 职场文书
学雷锋献爱心倡议书
2015/04/27 职场文书
2015年财政局工作总结
2015/05/21 职场文书
求职信如何撰写?
2019/05/22 职场文书