간단한 jQuery 양식 검증 스크립트

간단한 jQuery 양식 검증 스크립트

문 닫았습니다.이 질문은출입 금지의현재 답변을 받지 않고 있습니다.

---

이 질문을 개선하고 싶으십니까?스택 오버플로의 주제가 되도록 질문을 업데이트합니다.

10년 전에 문을 닫았습니다.

이 질문을 개선합니다.

저는 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/

파일에서 사용 가능한 옵션 규칙:

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 validator를 사용할 수 있지만 jquery.js와 jquery.form.js 파일을 추가해야 합니다. validator 파일을 포함한 후에 이렇게 validation을 정의합니다.

<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

언급URL : https://stackoverflow.com/questions/15060292/a-simple-jquery-form-validation-script