간단한 jQuery 양식 유효성 검사 스크립트 [닫힌]

jQuery를 사용하여 간단한 유효성 검사 양식을 만들었습니다. 잘 작동합니다. 문제는 내 코드에 만족하지 않는다는 것입니다. 동일한 출력 결과로 코드를 작성하는 다른 방법이 있습니까?

$(document).ready(function(){

$('.submit').click(function(){
    validateForm();   
});

function validateForm(){

    var nameReg = /^[A-Za-z]+$/;
    var numberReg =  /^[0-9]+$/;
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

    var names = $('#nameInput').val();
    var company = $('#companyInput').val();
    var email = $('#emailInput').val();
    var telephone = $('#telInput').val();
    var message = $('#messageInput').val();

    var inputVal = new Array(names, company, email, telephone, message);

    var inputMessage = new Array("name", "company", "email address", "telephone number", "message");

     $('.error').hide();

        if(inputVal[0] == ""){
            $('#nameLabel').after('<span class="error"> Please enter your ' + inputMessage[0] + '</span>');
        } 
        else if(!nameReg.test(names)){
            $('#nameLabel').after('<span class="error"> Letters only</span>');
        }

        if(inputVal[1] == ""){
            $('#companyLabel').after('<span class="error"> Please enter your ' + inputMessage[1] + '</span>');
        }

        if(inputVal[2] == ""){
            $('#emailLabel').after('<span class="error"> Please enter your ' + inputMessage[2] + '</span>');
        } 
        else if(!emailReg.test(email)){
            $('#emailLabel').after('<span class="error"> Please enter a valid email address</span>');
        }

        if(inputVal[3] == ""){
            $('#telephoneLabel').after('<span class="error"> Please enter your ' + inputMessage[3] + '</span>');
        } 
        else if(!numberReg.test(telephone)){
            $('#telephoneLabel').after('<span class="error"> Numbers only</span>');
        }

        if(inputVal[4] == ""){
            $('#messageLabel').after('<span class="error"> Please enter your ' + inputMessage[4] + '</span>');
        }       
}   

});

다음과 같이 jQuery Validate 플러그인 을 간단히 사용할 수 있습니다 .

jQuery :

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            field1: {
                required: true,
                email: true
            },
            field2: {
                required: true,
                minlength: 5
            }
        }
    });

});

HTML :

<form id="myform">
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="submit" />
</form>

데모 : http://jsfiddle.net/xs5vrrso/

옵션 : http://jqueryvalidation.org/validate

방법 : http://jqueryvalidation.org/category/plugin/

표준 규칙 : http://jqueryvalidation.org/category/methods/

additional-methods.js파일에서 사용할 수있는 선택적 규칙 :

maxWords
minWords
rangeWords
letterswithbasicpunc
alphanumeric
lettersonly
nowhitespace
ziprange
zipcodeUS
integer
vinUS
dateITA
dateNL
time
time12h
phoneUS
phoneUK
mobileUK
phonesUK
postcodeUK
strippedminlength
email2 (optional TLD)
url2 (optional TLD)
creditcardtypes
ipv4
ipv6
pattern
require_from_group
skip_or_fill_minimum
accept
extension

이를 위해 jquery 유효성 검사기를 사용할 수 있지만이를 위해 jquery.validate.js 및 jquery.form.js 파일을 추가해야합니다. 유효성 검사기 파일을 포함시킨 후 다음과 같이 유효성 검사를 정의하십시오.

<script type="text/javascript">
$(document).ready(function(){
    $("#formID").validate({
    rules :{
        "data[User][name]" : {
            required : true
        }
    },
    messages :{
        "data[User][name]" : {
            required : 'Enter username'
        }
    }
    });
});
</script>

당신은 볼 수 있습니다 required : true 정의 할 수있는 이메일 등의 많은 속성이 같은 email : true 번호가 number : true