Ein Formular, das anhand von jquery_jquery sofort prüft, ob das Format korrekt ist-js-Tutorial-php.cn

Ein Formular, das anhand von jquery_jquery sofort prüft, ob das Format korrekt ist

WBOY

Freigeben： 2016-05-16 15:01:56

Original

1879 Leute haben es durchsucht

Heutzutage können die Registrierungsmodule vieler Websites sofort überprüfen, ob das Format korrekt ist, was die Benutzererfahrung erheblich verbessert und sich sehr positiv auf die Entwicklung auswirkt.

Der folgende Code verwendet jquery, um eine sofortige Überprüfung eines Formularfeldformats (einschließlich Feldlänge, E-Mail-Format) und gleichzeitig beim Senden das Prüfereignis zu implementieren wird erneut ausgelöst.

Beachten Sie, dass diese Prüfung hauptsächlich auf Keyup und Fokus basiert. Diese beiden Ereignisse werden verwendet, um das Unschärfeereignis (Fokusverlust) auszulösen.

<html>
<head>
 <meta charset="utf-8" />
 <title></title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script src="jquery-1.3.2.min.js"></script>
 <script>
  $(function () {
　　　　　　　　//为每个必填字段后面加上*
   $("form :input.required").each(function () {
    var $required = $("<strong class='high'>*</strong>");
    $(this).parent().append($required);
   });
　　　　　　　　//textbox失去焦点事件
   $("form :input").blur(function () {
    var $parent = $(this).parent();
    $parent.find(".formtips").remove();
    if ($(this).is('#username')) {
     if (this.value == "" || this.value.length < 6) {
      var errorMsg = "请输入至少6位的用户名";
      $parent.append('<span class="formtips onError">' + errorMsg + "</span>");
     } else {
      var okMsg = "输入正确"
      $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
     }
    }
    if ($(this).is('#email')) {
     if (this.value == "" || (this.value != "" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
      var errorMsg = "请输入正确的E-Mail地址";
      $parent.append('<span class="formtips onError">' + errorMsg + "</span>");
     } else {
      var okMsg = "输入正确"
      $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
     }
    }
   }).keyup(function () {
    $(this).triggerHandler("blur");//keyup和focus利用triggerHandler来触发blur事件
   }).focus(function () {
    $(this).triggerHandler("blur");
   });
   $("#send").click(function () {//提交按钮事件
    $("form .required:input").trigger('blur');
    var numError = $('form .onError').length;
    if(numError)
    {
     return false;
    }
    alert("注册成功，密码已发到你的邮箱，请查收");
   });
  });

 </script>
</head>
<body>
 <form method="post" action="">
  <div class="int">
   <label for="username">用户名</label>
   <input type="text" id="username" class="required" />
  </div>
  <div class="int">
   <label for="email">邮箱</label>
   <input type="text" id="email" class="required" />
  </div>
  <div class="int">
   <label for="=personinfo">个人资料</label>
   <input type="text" id="personinfo" />
  </div>
  <div class="sub">
   <input type="submit" value="提交" id="send" />
   <input type="reset" id="res" />
  </div>
 </form>
</body>
</html>

Nach dem Login kopieren

Klicken Sie für weitere Inhalte: Jquery-Formularvalidierungsenzyklopädie

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der JQuery-Programmierung hilfreich ist.