एक साधारण jQuery फॉर्म सत्यापन स्क्रिप्ट [बंद]

Question

मैंने 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>');
        }       
}   

});

Comments

हाँ, आप इसे और बेहतर बनाने के लिए jquery सत्यापन स्क्रिप्ट का उपयोग कर सकते हैं।

— देवांग राठौड़

क्या आप मुझे दिखा सकते हैं कैसे? वे कहते हैं कि एक कोड लिखना एक कविता लिखने जैसा है। मुझे अपना कोड अनुकूलित चाहिए।

— jhedm

codereview.stackexchange.com - यह वही है जो आप देख रहे हैं

— अलेक्जेंडर

आप HTML5 फॉर्म सत्यापन का उपयोग कर सकते हैं:$('form')[0].checkValidity()

— niutech

यदि मुख्य फ़ोकस सादगी है, तो वैलेट जेकरी प्लगइन आशाजनक है। यह एक स्टार्टअप प्लगइन है। लेकिन, यह मान्यता के कुछ दिलचस्प तरीके का उपयोग करता है। यहाँ वहाँ गाइड के लिए लिंक है। valijate.com/Docs.php

— bula

Answer 1

आप बस इस प्रकार jQuery मान्य प्लगइन का उपयोग कर सकते हैं।

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

Answer 2

आप उसके लिए 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

Comments

jQuery सत्यापनकर्ता अच्छा है, लेकिन मुझे लगता है कि एक मान्यकर्ता जो नई HTML5 सत्यापन सुविधाओं को ध्यान में रखता है, और भी बेहतर है, जैसे ericleads.com/h5validate ।

— मैट ब्राउन

@MattB।, कभी भी उस एक के बारे में नहीं सुना, लेकिन jQuery के मान्य प्लगइन HTML5 सुविधाओं को भी ध्यान में रखता है , हालांकि मुझे यकीन नहीं है कि आपको दोनों का एक साथ उपयोग करने की आवश्यकता क्यों होगी।

— स्पार्की

देवांग, jquery.form.jsहै की आवश्यकता नहीं कोड आप दिखाया है उपयोग करने के लिए।

— स्पार्कली

जब तक आपके पास पहले से डिज़ाइन किया गया एक विशिष्ट सौंदर्य नहीं है, तब तक आपके पास एक विशिष्ट सौंदर्य है, जो HTML5-सपोर्ट करने वाले ब्राउज़र को डिफ़ॉल्ट तरीके से सत्यापन संदेश प्रदर्शित करने की अनुमति देता है, अक्सर यह अच्छा होता है, जहाँ सत्यापन प्लग-इन त्रुटि संदेशों को प्रदर्शित करने के लिए केवल एक वापसी के रूप में उपयोग किया जाता है पुराने ब्राउज़रों पर, और सत्यापन तर्क के लिए HTML5 समर्थन नहीं करता है (अतिरिक्त जावास्क्रिप्ट के बिना)। लेकिन यह मेरी व्यक्तिगत पसंद है जितना कुछ भी।

— मैट ब्राउन

@MattB।, आमतौर पर, jQuery का उपयोग करने वाले लोग क्रॉस-ब्राउज़र की निरंतरता की तलाश करते हैं जो आपको ब्राउज़र सुविधाओं से दूर जाकर मिलती है जो ब्रांड से ब्रांड में बहुत भिन्न होती है। मैं लोकप्रिय प्लगइन्स के साथ रहना पसंद करता हूं जिनके पास समर्थन का एक बड़ा आधार है, और अगर डेवलपर भी jQuery टीम का हिस्सा है , तो सभी बेहतर, IMO।

— स्पार्कली