클라이언트 HTML 양식 유효성 검사

Question

현재 취하고있는 수업을위한 웹 사이트를 디자인하고 있습니다. 이 클래스는 클라이언트 쪽 양식의 유효성을 검사하는 데 JavaScript가 필요합니다. 양식을 검증하기 위해 JavaScript를 사용해야하는 것 외에는 사전 요구 사항이 없습니다.

나는 코드 작성, 스크립팅 및 HTML 수정 작업을 여러 번 시도해 보았고이를 수행하는 방법을 알 수 없었다. 근본적인 문제는 내가 자바 스크립트에 대해서, 그리고 HTML/CSS에 대해서는 조금도 모른다는 것이다.

여기 내 양식은 HTML (및 CSS 서식)입니다. 이름, 이메일 주소 및 설명 상자가있는 간단한 양식입니다. 웹 사이트가 실제로 작동 할 필요는 없으므로 서버 쪽 프로세싱이 필요 없습니다. 그냥 간단한 검증.

HTML

<form method="post" onsubmit="return validateForm()" action="demo_form.asp" 
action="http://webdevfoundations.net/scripts/formdemo.asp" > 

    <div class="myRow"> 

    <p style="color: #cc6600; padding-left: 50px;"><b>Get Our Newsletter!</b></p> 
    <label style="color: #cc6600;" class="labelCol" for="myName"><b>Name:</b></label> 
    <input type="text" name="myName" id="myName" /> 

    </div> 

    <div class="myRow"> 
     <label style="color: #cc6600;" class="labelCol" for="myEmail"><b>E-mail:</b> 
     </label> 
     <input type="text" name="myEmail" id="myEmail" /> 
    </div> 

    <div> 
    <label style="color: #cc6600;" class="labelCol" for="myComments"><b>Comments:</b> 
    </label> 
    <textarea name="myComments" id="myComments" rows="1" cols="30"> 
    </textarea> 
    </div> 

    <div class="mySubmit"> 
     <input type="submit" value="Get Newsletter" /> 
    </div> 
</form> 
</div> 

그리고 이것은 내가 그것을

#myForm 
    { color: #ffffff; 
     font-family: 'PT Sans', sans-serif; 
     width: auto; 
     padding: 15px; 
     min-width: 400px; 
    } 

    .myRow 
    { padding-bottom: 20px; 
    } 

    .mySubmit 
    { margin-top: 10px; 
     margin-left: 110px; 
    } 
    .labelCol 
    { float: left; 
     width: 100px; 
     text-align: right; 
     padding-right: 10px; 
    } 

를 포맷하는 데 사용하는 CSS 단순히 유효성을 검사하는 스크립트 부분을 추가하는 방법을 잘 모르겠어요입니다 : 이름을 입력하고 이메일 주소는 "@"및 "." 올바른 이메일 주소로 사용하십시오. 여기에 저에게 수여 샘플 코드는,하지만 난 그것을 구현하는 방법을 아무 생각이 :이와, 엉망 경우

http://www.w3schools.com/js/js_form_validation.asp

미안 내 HTML은 재해 인 경우. 처음으로 웹 사이트를 만드십시오!

Answer 1

이제 클라이언트 측 유효성 검사에 javascript을 사용할 필요가 없습니다. HTML5에는 클라이언트 측 유효성 검사를위한 특성 및 유형이 내장되어 있습니다.

예를 들어, @과 .을 이메일 주소로 확인하려면 <input type=email>을 사용할 수 있습니다. classic article on HTML doctor 읽기, HTML5 더 입력 유형

<input type="email" required> 

: 당신이 빈 필드를 확인하려면

, 당신은으로 필요한 속성을 사용할 수 있습니다. 당신은 자바 스크립트를 사용하여 클라이언트 측 유효성 검사를 원하는 경우

One more article on HTML5 rocks

그러나, client side validation using JS and DOM에이 문서는 도움이 될 것입니다. 버튼은 자바 스크립트 함수 Submit() 다음을 클릭하면 이제

<form> 
    <input type='text' id='txtEmail'/> 
    <input type='submit' name='submit' onclick='Javascript:checkEmail();'/> 
</form> 

: JS를 사용하여 클라이언트 측 이메일 확인의

예 :

이 같은 HTML에서 텍스트 입력과 버튼 입력을 받아 호출됩니다. 이제 head 섹션에 아래 코드를 작성하십시오.

<script language="javascript"> 

    function checkEmail() { 

     var email = document.getElementById('txtEmail'); 
     var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/; 

     if (!filter.test(email.value)) { 
     alert('Please provide a valid email address'); 
     email.focus; 
     return false; 
    } 

}</script> 

/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/이 여기에 ... Please see this link for more information을 설명하기 매우 어렵습니다 ... 이메일 주소에 대한 정규식 패턴이다.

이 함수에서 filter.test(email.value)의 test() 메서드는 패턴 일치를 검사하고 일치하는 일치하는/일치하지 않는 쌍에 대한 조건이 부울 값 (true 또는 false)을 반환하면 true를 반환합니다.