2014-10-13 3 views
1

제출할 때 검증해야하는 웹 양식을 작성 중입니다. 유효성을 검사 할 때 두 가지 규칙을 따라야하는 이름의 필드가 있습니다.이 이름에는 적어도 3 자의 문자가 있어야하며 문자 사이에는 공백이 없어야합니다. 이름이 너무 짧을 때 오류 메시지를 표시하도록했지만 공백을 허용하지 않는 방법을 알아낼 수 없습니다.자바 스크립트 유효성 검사에서 공백을 허용하지 않습니다.

javascript를 사용하는 모든 문자 사이에 공백이 없도록 어떻게 유효성을 검사 할 수 있습니까? 내가 폼 입력 유효성 검사를위한 정규식을 사용하는 것이 좋습니다 것

<html> 
    <head> 
     <title>Project 5</title> 
    </head> 

    <body> 
     <form name="myForm" id="myForm" onsubmit="return validateForm()"> 
      First Name: <input type="text" id="name"> <br> 
      Age: <input type="text" id="age"> <br> 
      Street Address: <input type="text" id="address"> <br> 
      State: <select> 
       <option value="la">LA</option> 
       <option value="tx">TX</option> 
       <option value="ok">OK</option> 
       <option value="mi">MI</option> 
       <option value="az">AZ</option> 
      </select> <br> 
      Login Password: <input type="password" id="password"> <br> 
      <input type="submit" value="Submit"> <br> 
     </form> 

     <script type="text/javascript"> 
      function validateForm() { 
       return checkName(); 
      } 

      function checkName() { 
       var x = document.myForm; 
       var input = x.name.value; 
       if(input.length < 3) { 
        alert("Please enter a name with at least 3 letters"); 
        return false; 
       } 
       else if(input.length >= 3) { 

       } 
      } 

     </script> 

    </body> 
</html> 
+1

정규식'/ \ s /'(공백 포함) 또는'/^\ S + $ /'(전체 문자열에는 공백 만 포함)과 일치 시키려고 했습니까? –

+0

공백 만 검색하면 아무 것도 찾을 수 없을 때 괜찮습니까? (물론, 항상'/^\ S {3,} $ /') – Bergi

답변

2

:

여기에 지금까지 내 코드입니다. 하나는 위의 발표처럼, 하나 개의 정규 표현식 검사에서 수행 필드에 대한 모든 검증을 할 수 있습니다 정규 표현식을 사용

shouldFailTooShort = 'ts'; 
shouldFailSpace = 'has space'; 
shouldPass = 'no-spaces'; 

validationRule = /^\S{3,}$/; 
validationRule.test(shouldFailTooShort) === false; 
validationRule.test(shouldFailSpace) === false; 
validationRule.test(shouldPass) === true; 

: 아래의 예를 확인하십시오. 유용성 그러나 각 유효성 검사 요구 사항에 대해 하나의 규칙을 갖는 것이 좋습니다. 그러면 서로 다른 유효성 검사 규칙이 서로 다른 메시지를 생성 할 수 있으며 사용자는 메시지를 읽지 않고 항상 혼동하지 않아도됩니다.

my favourite regular expression reference을 살펴보십시오.

편집 : 여기에 의견을 제시하면서 솔루션 배포에 대한 제안을 제시합니다. 프로덕션에서는 alert 기능을 사용하지 말고 페이지 자체에 메시지를 표시하십시오. span 요소에 있습니다.

HTML :

<form name="myForm" id="myForm" onsubmit="return validateForm();"> 
    First Name: <input type="text" id="name" /> <br /> 
    <span id="nameErrMsg" class="error"></span> <br /> 
    <!-- ... all your other stuff ... --> 
</form> 
<button id="validateTestButton" value="Validate now" onclick="validateForm();">Validate now</button> 

자바 스크립트 : jsfiddle에서

validateForm = function() { 
    return checkName(); 
} 

function checkName() { 
    var x = document.myForm; 
    var input = x.name.value; 
    var errMsgHolder = document.getElementById('nameErrMsg'); 
    if (input.length < 3) { 
     errMsgHolder.innerHTML = 
      'Please enter a name with at least 3 letters'; 
     return false; 
    } else if (!(/^\S{3,}$/.test(input))) { 
     errMsgHolder.innerHTML = 
      'Name cannot contain whitespace'; 
     return false; 
    } else { 
     errMsgHolder.innerHTML = ''; 
     return undefined; 
    } 
} 

확인 라이브 예.

+0

이 코드를 코드 내에서 작동시키는 방법을 알아내는 데 어려움이 있습니다. 나는 내 코드를 보여주기 위해 질문을 편집했다.이 코드를 사용하여 어디에서 작업해야하는지 힌트를 주 겠는가? –

+0

완벽하게 작동합니다. 감사합니다 .-) –

1
for (var i=0, len = string.length; i<len; ++i) { 
    if (string.charAt(i) === ' ') { 
     alert('Name cannot have spaces!'); 
     break; 
    } 
} 
0

Javascript에서 한 줄의 코드 만 사용하여 모든 텍스트의 공백을 제거하는 옵션이 있습니다.

text=text.split(' ').join(''); // this will remove all the white space in your text. 
관련 문제