jqueryは単純なフォームvalidation_jqueryを実装します-jsチュートリアル-php.cn

jqueryは単純なフォームvalidation_jqueryを実装します

WBOY

リリース： 2016-05-16 15:31:47

オリジナル

914 人が閲覧しました

jquery で単純なフォーム検証を実装する方法。まず実装のアイデアを共有しましょう。

一般的な考え方:
まず、each() メソッドを使用して、必要なタグをそれぞれ追加して実装します。
each() メソッドでは、まず、で要素を作成し、次に作成した要素を append() メソッドを通じて親要素の後ろに追加します。 🎜> 。ここでの
this は、対応する入力要素に対応するたびに、対応する親要素が取得されます。次に、
input 要素に失われたフォーカスイベントを追加します。次に、ユーザー名と電子メールを確認します。ここで
は is() を判定するために使用されます。 がユーザー名である場合は、対応する処理を実行します。メールの場合は、対応する検証を実行します。 jQuery フレームワークでは、オリジナルの JavaScript コードを適切に散在させることもできます。たとえば、検証ユーザー名には
this.value と this.value.length が含まれます。内容を判断してください。次に、
正規表現を使用して電子メールの検証が実行されました。 次に、
keyup イベントと focus イベントを input 要素に追加します。keyup 中でも、blur イベントを呼び出して検証する必要があります。。対応するイベントをトリガーするには、triggerHandler() トリガーを使用します。最後にフォームを送信する際に統一検証を行い、全体と詳細の処理を行います。
必要に応じて
赤い星マークを追加してください。

jQuery 部分:

<script type="text/javascript">
//<![CDATA[
$(function(){  
  $("form :input.required").each(function(){
   var $required = $("<strong class='high'> *</strong>"); //创建元素
   $(this).parent().append($required); //然后将它追加到文档中
  });
   //文本框失去焦点后
  $('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");
  }).focus(function(){
    $(this).triggerHandler("blur");
  });//end blur

  
  //提交，最终验证。
   $('#send').click(function(){
    $("form :input.required").trigger('blur');
    var numError = $('form .onError').length;
    if(numError){
     return false;
    } 
    alert("注册成功,密码已发到你的邮箱,请查收.");
   });

  //重置
   $('#res').click(function(){
    $(".formtips").remove(); 
   });
})
//]]>
</script>

ログイン後にコピー

html 部分:

<body>

<form method="post" action="">
 <div class="int">
  <label for="username">用户名:</label>
  <!-- 为每个需要的元素添加required -->
  <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>

ログイン後にコピー

上記は、簡単なフォーム検証を実装するための jquery のキーコードです。皆さんの学習に役立つことを願っています。