jQuery验证插件validation使用指南

前端技术 2023/09/03 JavaScript

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

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/

本文地址：https://www.stayed.cn/item/7982

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案