Простий скрипт перевірки форми 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, щоб зробити його кращим.
Деванг Ратод,

ви можете мені показати, як? Кажуть, написання коду - це як написання вірша. Я хочу, щоб мій код був оптимізований.
jhedm

10
codereview.stackexchange.com - це те, що ви шукаєте
Олександр

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

якщо головна увага - простота, плагін valijate jquery є багатообіцяючим. це плагін запуску. але він використовує цікавий спосіб перевірки. ось посилання на там посібник. valijate.com/Docs.php
Була

Відповіді:


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>

DEMO: 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

18

ви можете використовувати для цього валідатор 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 Якщо ви не маєте певного естетичного вигляду, який вам дуже подобається для повідомлень про валідацію, дозволяючи браузеру, що підтримує HTML5, відображати повідомлення про перевірку за замовчуванням, це часто приємніше, коли плагін перевірки використовується лише як резервна копія для відображення повідомлень про помилки для старих браузерів, а для перевірки логіки HTML5 не підтримує (без додаткового Javascript). Але це стільки мої особисті переваги, скільки нічого.
Метт Браун

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