jQuery-Validierungs-Plug-in-Validierungs-Nutzungsleitfaden_jquery

Während des Website-Entwicklungsprozesses müssen wir manchmal überprüfen, ob die vom Benutzer eingegebenen Informationen unseren Anforderungen entsprechen, daher überprüfen wir die vom Benutzer übermittelten Daten. Die Überprüfung wird zweimal durchgeführt, einmal auf der Clientseite und einmal auf der Serverseite. Die clientseitige Verifizierung kann das Benutzererlebnis verbessern.

Es gibt viele JQuery-Validierungs-Plug-Ins, die grundsätzlich dieselben Funktionen implementieren. In diesem Artikel wird nur jquery.validate

vorgestellt, eines der JQuery-Validierungs-Plug-Ins.

jquery.Validation ist ein hervorragendes JQuery-Plug-In, das Client-Formulare validieren kann und viele anpassbare Eigenschaften und Methoden mit guter Skalierbarkeit bietet.

1.jquery.validate Plug-in-Funktion

Einfache Implementierung der Überprüfung von Kundeninformationen und Filterung von Informationen, die nicht den Anforderungen entsprechen

2.jquery.validate offizielle Adresse

Offizielle Adresse: http://jqueryvalidation.org/, mit detaillierten Anweisungen zur Plug-in-Nutzung

Offizielle Demo: http://jquery.bassistance.de/validate/demo/

3. So verwenden Sie jquery.validate

1. Zitieren Sie js

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

2.css-Stil, anpassbar, fügen Sie einfach einen Fehlerstil hinzu oder verwenden Sie den Stil in der offiziellen Demo.

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

3.js-Code

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

Der obige Code verwendet nur die vom Plug-in bereitgestellten Eigenschaften und Methoden. Sie können auch die Überprüfungsmethode anpassen. Wie zum Beispiel

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

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

  //方法代码

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

Die Verwendung benutzerdefinierter Methoden ist ebenfalls sehr einfach, einfach Element-ID: „checkUserName“

4. Verwendetes 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>

Weitere Anwendungen von Validierungsmethoden finden Sie unter http://jqueryvalidation.org/