Простой скрипт проверки формы jQuery [закрыто]


110

Я сделал простую форму проверки с помощью 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>');
        }       
}   

});

3
да, вы можете использовать скрипт проверки jquery, чтобы сделать его лучше.
Devang Rathod

можешь показать мне как? Говорят, написание кода похоже на написание стихотворения. Я хочу, чтобы мой код был оптимизирован.
jhedm

10
codereview.stackexchange.com - это то, что вы ищете
Александр

1
Вы можете использовать проверку формы HTML5:$('form')[0].checkValidity()
niutech

Если основное внимание уделяется простоте, то плагин valijate jquery является многообещающим. это плагин для запуска. но он использует интересный способ проверки. вот ссылка на руководство. valijate.com/Docs.php
bula

Ответы:


300

Вы можете просто использовать плагин 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

19

вы можете использовать для этого валидатор 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


3
Валидатор jQuery - это хорошо, но я думаю, что валидатор, который учитывает новые функции проверки HTML5, еще лучше, например ericleads.com/h5validate .
Мэтт Браун

@MattB., Никогда не слышал об этом, но плагин jQuery Validate также учитывает функции HTML5 , хотя я не уверен, зачем вам нужно / вы хотите использовать оба вместе.
Sparky

1
Devang, jquery.form.jsэто не требуется , чтобы использовать код , который вы , как показано.
Sparky

@Sparky Если у вас уже нет определенной эстетики, которая вам действительно нравится для сообщений проверки, разрешение браузеру, поддерживающему HTML5, отображать сообщения проверки по умолчанию, часто лучше, когда подключаемый модуль проверки используется только как резерв для отображения сообщений об ошибках в старых браузерах и для логики проверки HTML5 не поддерживает (без дополнительного Javascript). Но это в большей степени мое личное предпочтение.
Мэтт Браун

1
@MattB., Как правило, люди, использующие jQuery, ищут согласованность между браузерами, которую вы получаете, уходя от функций браузера, которые сильно различаются от бренда к бренду. Я также предпочитаю использовать популярные плагины, которые имеют огромную базу поддержки, и если разработчик также является частью команды jQuery , тем лучше, IMO.
Sparky
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.