将电子邮件和数字验证添加到 jquery 表单答案

【问题标题】：Add email and numerical validation to jquery form将电子邮件和数字验证添加到 jquery 表单
【发布时间】：2013-07-11 00:21:41
【问题描述】：

我有一个非常简单的调查表，只需要几个字段是必填的。如何向电子邮件字段添加电子邮件验证以确认其实际电子邮件。以及如何确认 zip_code 仅包含数字？如果不使用警报，我可以使用显示在表单上的 div 标签并告诉他们如果有人知道如何简单地添加它，他们需要填写什么，那也很棒。我正在使用 Twitter Bootstrap，并且很想使用他们的警告 div

$(document).ready(function(){ 
    $('#contact_form').submit(function(){
        if ($('#first_name').val() == '') {
            alert('You must enter your first name!');           
            return false;
        }
        if ($('#last_name').val() == '') {
            alert('You must enter your last name!');
            return false;
        }
        if ($('#email').val() == '') {
            alert('You must enter an email!');
            return false;
        } 
        if ($('#zip_code').val() == '') {
            alert('You must enter your zip code!');
            return false;
        }  
        if ($('#message').val() == '') {
            alert('You need to tell us something! Please enter your message!');
            return false;
        }
    });
});

【问题讨论】：

标签： jquery forms validation

【解决方案1】：

你可以这样做

HTML

<div class="error"></div>
<form id="contact_form" method="post" action="">
    <input type="text" name="first_name" id="first_name" placeholder="First Name"/>
    <br/>
    <input type="text" name="last_name" id="last_name" placeholder="Last Name"/>
    <br/>
    <input type="text" name="email" id="email" placeholder="Email"/>
    <br/>
    <input type="text" name="zip_code" id="zip_code" placeholder="Zip Code"/>
    <br/>
    <textarea name="message" id="message" placeholder="Message"></textarea>
    <br/>
    <input type="submit" value="submit" />
</form>

JQUERY

$(document).ready(function(){ 
    $('#contact_form').submit(function(){
        error = '';

        if ($('#first_name').val() == '') {
            error += 'You must enter your first name!<br/>';
        }

        if ($('#last_name').val() == '') {
            error += 'You must enter your last name!<br/>';
        }

        if ($('#email').val() == '') {
            error += 'You must enter your email<br/>';
        }
        else
        {
            var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

            if(!pattern.test($('#email').val()))
            {
                error += "Invalid email address<br/>";
            }
        }

        if ($('#zip_code').val() == '') {
            error += 'You must enter your zip code<br/>';
        } 
        else
        {
            if (!isNumber($('#zip_code').val()))
            {
                error += 'Invalid zip code<br/>';
            }
        }
        if ($('#message').val() == '') {
            error += 'You need to tell us something! Please enter your message!';
        }

        if(error != '')
        {
            $('.error').html(error);
            $('.error').fadeIn();
            return false;
        }
        else
        {
            return true;
        }
    });
});

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

示例 Fiddle

【讨论】：

你这个人，按照我的需要完美地工作。先生，您的手艺大师！
@user2267668 很高兴为您提供帮助:)

【解决方案2】：

查看此答案以验证您的电子邮件字段Email validation using jQuery

查看此答案以获取邮政编码验证ZIP Code (US Postal Code) validation

要输出到引导警告消息，请使用以下内容代替您的警报...

 $(body).prepend('<div class="alert alert-block alert-error fade in"><a class="close" data-dismiss="alert" href="#">&times;</a>You need to tell us something! Please enter your message!</div>');

【讨论】：