it-swarm.com.de

Ein einfaches Skript zur Validierung von jQuery-Formularen

Ich habe mit jQuery ein einfaches Validierungsformular erstellt. Es funktioniert gut. 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-\.][email protected]([\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>');
        }       
}   

});
99
jhedm

Sie können einfach das jQuery Validate-Plugin 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 verfügbar in der Datei 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
_
286
Sparky

sie können dafür den jquery validator verwenden, müssen jedoch die Dateien jquery.validate.js und jquery.form.js hinzufügen. Nachdem Sie die Validierungsdatei hinzugefü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 required : true sehen, genauso wie es viel mehr Eigenschaften für E-Mails gibt, die Sie email : true für die Nummer number : true definieren können.

18
Devang Rathod