자바 스크립트를 통한 HTML 양식 유효성 확인

Question

시청자가 "fssadf"와 같은 단어를 입력하지 못하도록하고 중간에 "@"를 포함해야하는 유효한 이메일을 입력하도록합니다. 스팸 및 주입을 방지합니다.

는 또한 양식 I이 포함 js_function.js 사용

"올바른 이메일에 이메일 필드를 변경합니다"라는 오류 메시지가 표시하려면 :

function validEmail() 
{ 
    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
    var email_address = $("#email").val(); 
    if(reg.test(email_address) == false) 
     return false; 
    else 
     return true; 
} 

을하지만, 그렇지 않습니다 시청자가 유효한 이메일 대신 "sfdasfd"를 보내지 못하게합니다.

위 내용을 달성하려면 어떻게해야합니까? 파일 아래

는

체크 아웃 : http://www.mediafire.com/?kx5bvttc0s2fbrs

덕분에, 라미

Answer 1

에게있어

난 당신이 제공하는 무엇을 내 프로그램에 오류가 표시되지 않았지만 여전히 사용하는 대신이

var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 

의

var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 

수 있지만 그게 도움이 될 것입니다 생각합니다. 나는 나를 위해 제대로 작동하는 총 Javascript 코드를 제공했다.

function validEmail() 
    { 

     var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
     var email_address = $("#email").val(); 
     if(reg.test(email_address) == false) 
      return false; 
     else 
      return true; 
    } 

사용이

또는 너무 다른 방법이를 사용할 수 있습니다

---

HTML

<form> 
    //Other Codes 
    <input type="text" name="email" id="email" onchange="validate(this.value)" /> 
    //Other Codes 
</form> 

그리고 자바 스크립트

<script> 

function validate(email) 
{ 
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
    if(reg.test(email) == false) 
     { 
      alert("This is a invalid Email Address!"); 
      document.getElementById('email').value = ''; 
     document.getElementById('email').focus(); 
     return false; 
    } 
    else{ 
     return true; 
    } 
} 
</script> 

,

---

또는

---

HTML

<form> 
    //Other Codes 
    <input type="text" name="email" id="email" onchange="validate()" /> 
    //Other Codes 
</form> 

그리고 자바 스크립트

<script> 

function validate() 
{ 
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
    var email = document.getElementById('email').value; 
    if(reg.test(email) == false) 
     { 
      alert("This is a invalid Email Address!"); 
      document.getElementById('email').value = ''; 
     document.getElementById('email').focus(); 
     return false; 
    } 
    else{ 
     return true; 
    } 
} 
</script> 

---

그리고 마지막 솔루션은 내가 생각 적용 쉽게 조용합니다. 페이지 대신 팝업

에

오류 메시지

---

HTML

<form> 
     //Other Codes 
     <input type="text" name="email" id="email" onchange="validate()" /> 
     <span id="errormessage"></span> 
     //Other Codes 
    </form> 

그리고 자바 스크립트

<script> 

function validate() 
{ 
    var reg = /^[_a-z0-9]+(\.[a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/; 
     var email = document.getElementById('email').value; 
    if(reg.test(email) == false) 
     { 
      document.getElementById('errormessage').innerHTML= 'fill your email'; 
      document.getElementById('email').value = ''; 
     document.getElementById('email').focus(); 
     return false; 
    } 
    else{ 
      document.getElementById('errormessage').innerHTML= ''; 
     return true; 
    } 
} 
</script> 

---

Answer 2

과 함께하려고이

$(document).ready(function() { 

$('#btn-submit').click(function() { 

    $(".error").hide(); 
    var hasError = false; 
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 

    var emailaddressVal = $("#UserEmail").val(); 
    if(emailaddressVal == '') { 
     $("#UserEmail").after('<span class="error">Please enter your email address.</span>'); 
     hasError = true; 
    } 

    else if(!emailReg.test(emailaddressVal)) { 
     $("#UserEmail").after('<span class="error">Enter a valid email address.</span>'); 
     hasError = true; 
    } 

    if(hasError == true) { return false; } 

}); 

}); 이 질문의

Answer 3

중복 :

무시되어서는 안 가장자리 사례에 대한 코멘트에 어떤 가치있는 토론이

Validate email address in JavaScript?

.

요청하기 전에 Google에이 프로그램을 사용해 보셨습니까? IT는/매우/일반적인 질문입니다.

Answer 4

당신이 jQuery를 사용하여 순수 HTML5 솔루션 후라면 .... 여기에 라이브 demo

HTML

<form id="form"> 
    Email <input name="field1" required="required" type="email" /> <br /> 
    <div id="error"></div> 
    <input required="required" name="submit" type="submit" /> 
</form>​ 

코드

$(document).ready(function() { 
    var validCheckInput = function() { 
     if ($(this)[0].checkValidity()) { 
      $(this).removeClass("error"); 
      $("#error").empty();     
     } else { 
      $(this).addClass("error"); 
      $("#error").text("change the email field to the correct email"); 
     } 

     if ($("#form")[0].checkValidity()) { 
      $("#form input[type='submit']").removeAttr("disabled"); 
     } else { 
      $("#form input[type='submit']").attr("disabled", "disabled"); 
     } 
    };s 

    var binds = function(validCheck) { 
     $(this).change(validCheck); 
     $(this).focus(validCheck); 
     $(this).keyup(validCheck); 
     validCheck.call($(this)); 
    } 
    $("#form input").each(function() {binds.call(this, validCheckInput)}); 

});​ 

CSS

.error { 
    border: 2px solid red; 
}​