집 > 기사 > 웹 프론트엔드 > jquery는 간단한 형식을 구현합니다.

jquery는 간단한 형식을 구현합니다.

WBOY원래의: 2016-05-16 15:31:47861검색

jquery에서 간단한 양식 유효성 검사를 구현하는 방법, 먼저 구현 아이디어를 공유하겠습니다.

일반 아이디어:
먼저 each() 메서드를 사용하여 각 필수에 필수 태그를 추가하고 구현하세요.
Each() 메소드에서 먼저 , 으로 요소를 생성한 후 append() 메소드를 통해 생성된 요소를 상위 요소 뒤에 추가합니다. 🎜> . 여기서
this는 매우 중요합니다. 매번 this가 해당 입력 요소에 해당하고 해당 상위 요소가 얻어집니다. 그런 다음
input 요소에 초점 상실 이벤트를 추가합니다. 그런 다음 사용자 이름과 이메일을 확인합니다. 여기서
는 is()를 판단하는 데 사용됩니다. 이 사용자 이름인 경우 해당 처리를 수행합니다. jQuery 프레임워크에서는 원본 자바스크립트 코드를 적절하게 삽입할 수도 있습니다. 예를 들어 확인 사용자 이름에는
this.value 및 this.value.length가 포함됩니다. 내용을 판단하세요. 그런 다음
정규식을 사용하여 이메일 확인을 수행했습니다. 그런 다음 입력 요소에
keyup 이벤트 및 focus 이벤트를 추가합니다. keyup 중에도 Blur 이벤트를 호출하여 이를 확인해야 합니다. . 해당 이벤트를 트리거하려면 TriggerHandler() 트리거를 사용하십시오. 최종적으로 Form을 제출할 때 통합 검증을 수행하고 전체 및 세부 처리를 처리합니다.
필요한 경우
빨간색 별표를 추가하세요.

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의 핵심 코드입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

성명：

이전 기사：JS 캡슐화된 쿠키 연산 기능 예시(설정, 읽기, 삭제)_javascript 기술다음 기사：JS 캡슐화된 쿠키 연산 기능 예시(설정, 읽기, 삭제)_javascript 기술

jquery는 간단한 형식을 구현합니다.

관련 기사