Um script de validação de formulário jQuery simples [fechado]


110

Fiz um formulário de validação simples usando jQuery. Está funcionando bem. O problema é que não estou satisfeito com meu código. Existe outra maneira de escrever meu código com o mesmo resultado de saída?

$(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
sim, você pode usar o script de validação jquery para torná-lo mais melhor.
Devang Rathod

você pode me mostrar como? Dizem que escrever um código é como escrever um poema. Eu quero meu código otimizado.
jhedm

10
codereview.stackexchange.com - é o que você está procurando
Alexander

1
Você pode usar a validação de formulário HTML5:$('form')[0].checkValidity()
niutech

se o foco principal é a simplicidade, o plugin valijate jquery é promissor. é um plugin de inicialização. mas, ele usa alguma forma interessante de validação. aqui está o link para esse guia. valijate.com/Docs.php
bula

Respostas:


300

Você pode simplesmente usar o plugin jQuery Validate da seguinte maneira.

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/

Opções: http://jqueryvalidation.org/validate

Métodos: http://jqueryvalidation.org/category/plugin/

Regras padrão : http://jqueryvalidation.org/category/methods/

Regras opcionais disponíveis com o additional-methods.jsarquivo :

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

você pode usar o validador jquery para isso, mas você precisa adicionar o arquivo jquery.validate.js e jquery.form.js para isso. depois de incluir o arquivo validador, defina sua validação algo assim.

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

Você pode ver que required : true há muitas outras propriedades, como por e-mail, que você pode definir email : true por número number : true


3
O validador jQuery é bom, mas acho que um validador que leva em consideração os novos recursos de validação do HTML5 é ainda melhor, por exemplo, ericleads.com/h5validate .
Matt Browne

@MattB., Nunca ouvi falar disso, mas o plugin jQuery Validate também leva os recursos do HTML5 em consideração , embora eu não tenha certeza de por que você precisa / deseja usar os dois juntos.
Sparky

1
Devang, nãojquery.form.js é obrigado a usar o código que você mostrou.
Sparky

@Sparky A menos que você tenha uma estética específica já projetada de que realmente goste para mensagens de validação, permitir que um navegador com suporte a HTML5 exiba mensagens de validação da maneira padrão é geralmente mais agradável, onde o plugin de validação só é usado como um substituto para a exibição de mensagens de erro em navegadores mais antigos e para lógica de validação, HTML5 não é compatível (sem Javascript extra). Mas isso é tanto minha preferência pessoal quanto qualquer coisa.
Matt Browne

1
@MattB., Normalmente, as pessoas que usam jQuery procuram a consistência entre navegadores que você obtém ao se afastar dos recursos do navegador, que variam muito de marca para marca. Eu também prefiro ficar com plug-ins populares que têm uma grande base de suporte, e se o desenvolvedor também faz parte da equipe jQuery , melhor ainda, IMO.
Sparky
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.