สคริปต์ตรวจสอบความถูกต้องของฟอร์ม 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 หลังจากรวมไฟล์ validator แล้วจะกำหนดการตรวจสอบความถูกต้องของคุณเช่นนี้

<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