[javascript] Form validation 체크 - validate.js


Form에서 필드값들 유효성 체크할때 괜찮은 javascript 있다. 



validate.js



설치 방법
Include the JavaScript file in your source
<script type="text/javascript" src="validate.min.js"></script>
사용법
Create the validation object with your desired rules. This needs to be in a <script> tag located just before your closing </body> tag. The reason for this being that the DOM needs to have your form loaded before you can attach your rules.
var validator = new FormValidator('example_form', [{
    name: 'req',
    display: 'required',    
    rules: 'required'
}, {
    name: 'alphanumeric',
    rules: 'alpha_numeric'
}, {
    name: 'password',
    rules: 'required'
}, {
    name: 'password_confirm',
    display: 'password confirmation',
    rules: 'required|matches[password]'
}, {
    name: 'email',
    rules: 'valid_email'
}, {
    name: 'minlength',
    display: 'min length',
    rules: 'min_length[8]'
}], function(errors, event) {
    if (errors.length > 0) {
        // Show the errors
    }
});
'examlpe_form'은 해당 Form의 이름이고, 
각 필드마다 중괄호를 열어서 적어주면 된다. 

  name: '필드name',
  rules: '해당필드에 적합한 규칙'  
  display : 'placeholder'


필수값, 최대크키, 숫자 혹은 문자만, 이메일주소 유효성, ip, url 등
어지간한건 전부 있다.
RuleDescriptionParameterExample
requiredreturns false if the form element is empty.no
matchesreturns false if the form element value does not match the one in the parameter.yesmatches[other_element]
valid_emailreturns false if the form element value is not a valid email address.no
valid_emailsreturns false if any value provided in a comma separated list is not a valid email.no
min_lengthreturns false if the form element value is shorter than the parameter.yesmin_length[6]
max_lengthreturns false if the form element value is longer than the parameter.yesmax_length[8]
exact_lengthreturns false if the form element value length is not exactly the parameter.yesexact_length[4]
greater_thanreturns false if the form element value is less than the parameter after using parseFloat.yesgreater_than[10]
less_thanreturns false if the form element value is greater than the parameter after using parseFloat.yesless_than[2]
alphareturns false if the form element contains anything other than alphabetical characters.no
alpha_numericreturns false if the form element contains anything other than alpha-numeric characters.no
alpha_dashreturns false if the form element contains anything other than alphanumeric characters, underscores, or dashes.no
numericreturns false if the form element contains anything other than numeric characters.no
integerreturns false if the form element contains anything other than an integer.no
decimalreturns false if the form element contains anything other than a decimal.no
is_naturalreturns false if the form element contains anything other than a natural number: 0, 1, 2, 3, etc.no
is_natural_no_zeroreturns false if the form element contains anything other than a natural number, but not zero: 1, 2, 3, etc.no
valid_ipreturns false if the supplied IP is not valid.no
valid_base64returns false if the supplied string contains anything other than valid Base64 characters.no
valid_credit_cardreturns false if the supplied string is not a valid credit cardno
valid_urlreturns false if the supplied string is not a valid urlno
is_file_typereturns false if the supplied file is not part of the comma separated list in the paramteryesis_file_type[gif,png,jpg]










댓글

이 블로그의 인기 게시물

[spring] log4j 설정 및 사용법

[linux] 백그라운드 작업 nohup [xxx.sh] &

[spring] 인터셉터 와 필터