[javascript] Form validation 체크 - validate.js

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

validate.js

http://rickharrison.github.io/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 등
어지간한건 전부 있다.

Rule	Description	Parameter	Example
required	returns false if the form element is empty.	no
matches	returns false if the form element value does not match the one in the parameter.	yes	matches[other_element]
valid_email	returns false if the form element value is not a valid email address.	no
valid_emails	returns false if any value provided in a comma separated list is not a valid email.	no
min_length	returns false if the form element value is shorter than the parameter.	yes	min_length[6]
max_length	returns false if the form element value is longer than the parameter.	yes	max_length[8]
exact_length	returns false if the form element value length is not exactly the parameter.	yes	exact_length[4]
greater_than	returns false if the form element value is less than the parameter after using parseFloat.	yes	greater_than[10]
less_than	returns false if the form element value is greater than the parameter after using parseFloat.	yes	less_than[2]
alpha	returns false if the form element contains anything other than alphabetical characters.	no
alpha_numeric	returns false if the form element contains anything other than alpha-numeric characters.	no
alpha_dash	returns false if the form element contains anything other than alphanumeric characters, underscores, or dashes.	no
numeric	returns false if the form element contains anything other than numeric characters.	no
integer	returns false if the form element contains anything other than an integer.	no
decimal	returns false if the form element contains anything other than a decimal.	no
is_natural	returns false if the form element contains anything other than a natural number: 0, 1, 2, 3, etc.	no
is_natural_no_zero	returns false if the form element contains anything other than a natural number, but not zero: 1, 2, 3, etc.	no
valid_ip	returns false if the supplied IP is not valid.	no
valid_base64	returns false if the supplied string contains anything other than valid Base64 characters.	no
valid_credit_card	returns false if the supplied string is not a valid credit card	no
valid_url	returns false if the supplied string is not a valid url	no
is_file_type	returns false if the supplied file is not part of the comma separated list in the paramter	yes	is_file_type[gif,png,jpg]