Guide d'utilisation de la validation du plug-in de validation jQuery_jquery

Pendant le processus de développement du site Web, nous devons parfois vérifier si les informations saisies par l'utilisateur répondent à nos exigences, nous vérifierons donc les données soumises par l'utilisateur. La vérification est effectuée deux fois, une fois côté client et une fois côté serveur. La vérification côté client peut améliorer l'expérience utilisateur.

Il existe de nombreux plug-ins de validation jquery et ils implémentent essentiellement les mêmes fonctions. Cet article présente uniquement jquery.validate

, l'un des plug-ins de validation jquery.

jquery.Validation est un excellent plug-in jquery qui peut valider les formulaires clients et fournit de nombreuses propriétés et méthodes personnalisables avec une bonne évolutivité.

Fonction du plug-in 1.jquery.validate

Mise en œuvre facile de la vérification des informations client et du filtrage des informations qui ne répondent pas aux exigences

2.jquery.validate adresse officielle

Adresse officielle : http://jqueryvalidation.org/, avec instructions détaillées d'utilisation du plug-in

Démo officielle : http://jquery.bassistance.de/validate/demo/

3. Comment utiliser jquery.validate

1. Citation js

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

Style 2.css, personnalisable, ajoutez simplement un style d'erreur ou utilisez le style dans la démo officielle.

.error{
  color:red;
  margin-left:8px;
}

Code 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");
    }
  });
});

Le code ci-dessus utilise uniquement les propriétés et méthodes fournies par le plug-in. Vous pouvez également personnaliser la méthode de vérification. Comme

$.validator.addMethod("checkUserName", function(value) {

    //value为验证的值，对应于元素id

  //方法代码

}, '用户名格式不正确');

L'utilisation de méthodes personnalisées est également très simple, il suffit d'identifier l'élément : "checkUserName"

4. HTML utilisé

<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>

Pour plus d'applications des méthodes de validation, veuillez consulter http://jqueryvalidation.org/