자바 스크립트 및 HTML 양식 유효성 검사

Question

나는 html과 자바 스크립트를 배우려고합니다. html 양식을 작성하고 javascript를 사용하여 필드의 유효성을 검사합니다. 나는 age 필드에 대한 isNaN 체크, emial에 대한 정규식 체크, 모든 필드에 대한 존재 확인을 가지고있다. 현재 주소 표시 줄에 양식을 출력하고 있지만 오류가 발생하면서 작동하지 않습니다. 다음은

<title> </title> 
<script type="text/javascript"> 

    function validate() 
    { 
     var errors = 0; 
     if (isNumeric(document.getElementById("age").value) == false) 
     { 
      errors++; 
     } 
     if (emailCheck(document.getElementById("email").value) == false) 
     { 
      errors++; 
     } 
     var inputBoxes = document.getElementsByTagName('input'); 
     for(var i= 0; i < inputBoxes.length; i++) 
     { 
      if(inputBoxes[i].type != 'text') continue; 
      if(presenceCheck(inputBoxes[i].value) == false) 
      { 
       errors++; 

      } 
     } 
     console.log(errors); 
     if(errors == 0) 
     { 
     window.location.assign("output.html#" + "%%" + "name" + "%%" + 
     document.getElementById("name").value + "%%" + "email" + "%%" + 
     document.getElementById("email").value + "%%" + "age" + "%%" + 
     document.getElementById("age").value + "%%" + "comments" + "%%" + 
     document.getElementById("comments").value); 
     } 
    } 
    function isNumeric(number) 
    { 
     return !isNaN(number) && number != null && number != ""; 
    } 
    function emailCheck(email) 
    { 
     var emailRegex = /\s+@\s+.\s+/; 
     return emailRegex.test(email); 
    } 
    function presenceCheck(data) 
    { 
     var regex = /\s+/; 
     return regex.test(data); 
    } 

</script> 

는

<form id="frmA" name="frmA"> 
    <label name="frmName">Name:</label><br /> 
    <input form="frmA" type="text" name="frmName" id="name"/><br /> 
    <label name="frmEmail">E-Mail:</label><br /> 
    <input form="frmA" type="text" name="frmEmail" id="email"/><br /> 
    <label name="age">Age:</label><br /> 
    <input form="frmA" name="frmAge" id="age"/><br /> 
    <label name="frmComments">Comments:</label><br /> 
    <textarea form="frmA" cols="50" rows="10" id="comments"></textarea><br /> 
</form> 
    <button onClick="validate();">Submit</button> 

내가 데이터가 존재하지 않을 때 검사 및 형태 I 입력 데이터를 제출 명중 그러나 때 일을 알고 바로 그 순간에 body 태그에 incased되는 형태입니다 나는 여전히 4 가지 오류에 직면 해있다. (데이터가없는 5 개의 오류가 있습니다. 3x 존재 확인, 정규 표현식의 경우 1 개, isNaN의 경우)

제 질문은 왜 계속 오류가 발생하고 출력이 없는지입니다.

도움을 주시면 감사하겠습니다.

추가 : 오류가있을 때 입력란의 색상을 변경하고 싶습니다.

Answer 1

정규식이 잘못되었습니다. /\s+@\s+.\s+/이고 /\w+@\w+\.\w+/이어야합니다. 당신은 도트를 벗어나지 않았고 \s은 문자열이 아닌 공백과 일치합니다. \w와 (과) 일치하는 단어. 적절한 전자 메일 정규식의 경우 훨씬 더 많이 필요하지만 간단한 작업으로 충분합니다. 두 번째 정규식은 /\w+/이어야합니다.