Ein einfaches Skript zur Validierung von jQuery-Formularen [geschlossen]

110

Ich habe mit jQuery ein einfaches Validierungsformular erstellt. Es funktioniert in Ordnung. Die Sache ist, dass ich mit meinem Code nicht zufrieden bin. Gibt es eine andere Möglichkeit, meinen Code mit demselben Ausgabeergebnis zu schreiben?

$(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>');
        }       
}   

});
jhedm
quelle
3
Ja, Sie können das jquery-Validierungsskript verwenden, um es besser zu machen.
Devang Rathod
Kannst du mir zeigen wie? Sie sagen, einen Code zu schreiben ist wie ein Gedicht zu schreiben. Ich möchte, dass mein Code optimiert wird.
Jhedm
10
codereview.stackexchange.com - es ist, was Sie suchen
Alexander
1
Sie können HTML5 Formularvalidierung verwenden:$('form')[0].checkValidity()
Niutech
Wenn der Schwerpunkt auf Einfachheit liegt, ist das valijate jquery Plugin vielversprechend. Es ist ein Start-Plugin. Es wird jedoch eine interessante Art der Validierung verwendet. Hier ist der Link für den Leitfaden. valijate.com/Docs.php
bula

Antworten:

300

Sie können das jQuery Validate-Plugin einfach wie folgt verwenden.

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>

DEMO: http://jsfiddle.net/xs5vrrso/

Optionen: http://jqueryvalidation.org/validate

Methoden: http://jqueryvalidation.org/category/plugin/

Standardregeln : http://jqueryvalidation.org/category/methods/

Optionale Regeln, die mit der additional-methods.jsDatei verfügbar sind :

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
Sparky
quelle
18

Sie können dafür den jquery validator verwenden, dafür müssen Sie jedoch die Dateien jquery.validate.js und jquery.form.js hinzufügen. Nachdem Sie die Validierungsdatei eingefügt haben, definieren Sie Ihre Validierung wie folgt.

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

Sie können sehen, required : true dass es viel mehr Eigenschaften wie für E-Mails gibt, die Sie email : true für die Nummer definieren können number : true

Devang Rathod
quelle
3
Der jQuery-Validator ist gut, aber ich denke, ein Validator, der die neuen HTML5-Validierungsfunktionen berücksichtigt, ist noch besser, z . B. ericleads.com/h5validate .
Matt Browne
@MattB., Habe noch nie davon gehört, aber das jQuery Validate-Plugin berücksichtigt auch HTML5-Funktionen , obwohl ich nicht sicher bin, warum Sie beide zusammen verwenden möchten / möchten.
Sparky
1
Devang jquery.form.jsist nicht erforderlich , um den angezeigten Code zu verwenden.
Sparky
@Sparky Wenn Sie nicht bereits eine bestimmte Ästhetik entwickelt haben, die Sie für Validierungsnachrichten wirklich mögen, ist es oft besser, einem HTML5-unterstützenden Browser die standardmäßige Anzeige von Validierungsnachrichten zu ermöglichen, wobei das Validierungs-Plugin nur als Fallback für die Anzeige von Fehlermeldungen verwendet wird In älteren Browsern und für die Validierungslogik wird HTML5 nicht unterstützt (ohne zusätzliches Javascript). Aber das ist genauso meine persönliche Präferenz wie alles andere.
Matt Browne
1
@MattB. Normalerweise suchen Benutzer von jQuery nach der browserübergreifenden Konsistenz, die Sie erhalten, wenn Sie sich von Browserfunktionen entfernen, die von Marke zu Marke sehr unterschiedlich sind. Ich halte mich auch lieber an beliebte Plugins mit einer riesigen Unterstützungsbasis, und wenn der Entwickler auch Teil des jQuery-Teams ist , umso besser, IMO.
Sparky