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>');
}
}
});
jquery
validation
jhedm
quelle
quelle
$('form')[0].checkValidity()
Antworten:
Sie können das jQuery Validate-Plugin einfach wie folgt verwenden.
jQuery :
HTML :
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.js
Datei verfügbar sind :quelle
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.
Sie können sehen,
required : true
dass es viel mehr Eigenschaften wie für E-Mails gibt, die Sieemail : true
für die Nummer definieren könnennumber : true
quelle
jquery.form.js
ist nicht erforderlich , um den angezeigten Code zu verwenden.