一个简单的 jQuery 表单验证脚本 [英] A simple jQuery form validation script

问题描述

我使用 jQuery 制作了一个简单的验证表单.它工作正常.问题是我对我的代码不满意.有没有其他方法可以编写具有相同输出结果的代码?

$(document).ready(function(){$('.submit').click(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 phone = $('#telInput').val();var message = $('#messageInput').val();var inputVal = new Array(names, company, email, phone, message);var inputMessage = new Array("name", "company", "email address", "telephone number", "message");$('.error').hide();if(inputVal[0] == ""){$('#nameLabel').after('<span class="error"> 请输入您的 ' + inputMessage[0] + '</span>');}否则 if(!nameReg.test(names)){$('#nameLabel').after('<span class="error"> 仅限字母</span>');}if(inputVal[1] == ""){$('#companyLabel').after('<span class="error"> 请输入您的 ' + inputMessage[1] + '</span>');}if(inputVal[2] == ""){$('#emailLabel').after('<span class="error"> 请输入您的 ' + inputMessage[2] + '</span>');}否则 if(!emailReg.test(email)){$('#emailLabel').after('<span class="error">请输入有效的电子邮件地址</span>');}if(inputVal[3] == ""){$('#telephoneLabel').after('<span class="error"> 请输入您的 ' + inputMessage[3] + '</span>');}else if(!numberReg.test(telephone)){$('#telephoneLabel').after('<span class="error"> 仅限数字</span>');}if(inputVal[4] == ""){$('#messageLabel').after('<span class="error"> 请输入您的 ' + inputMessage[4] + '</span>');}}});

解决方案

您可以简单地使用 jQuery Validate 插件，如下所示.

jQuery:

$(document).ready(function () {$('#myform').validate({//初始化插件规则:{字段 1:{要求:真实，电子邮件:真实},字段 2:{要求:真实，最小长度:5}}});});

HTML:

<input type="text" name="field1"/><input type="text" name="field2"/><输入类型=提交"/></表单>

演示:http://jsfiddle.net/xs5vrrso/

选项: http://jqueryvalidation.org/validate

方法: http://jqueryvalidation.org/category/plugin/

标准规则:http://jqueryvalidation.org/category/methods/>

可选规则可用于 additional-methods.js 文件:

maxWords最小词范围词英文字母字母数字只写字母没有空格拉链范围邮政编码美国整数葡萄酒日期ITA日期NL时间时间12h电话美国电话英国移动英国电话英国邮政编码英国剥离最小长度email2(可选顶级域名)url2(可选的顶级域名)信用卡类型ipv4ipv6图案require_from_groupskip_or_fill_minimum接受延期

I made a simple validation form using jQuery. It's working alright. The thing is I'm not satisfied with my code. Is there another way around to write my code with the same output result?

$(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>');
        }       
}   

});

解决方案

You can simply use the jQuery Validate plugin as follows.

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/

Options: http://jqueryvalidation.org/validate

Methods: http://jqueryvalidation.org/category/plugin/

Standard Rules: http://jqueryvalidation.org/category/methods/

Optional Rules available with the additional-methods.js file:

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

这篇关于一个简单的 jQuery 表单验证脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！