1

我有一个非常简单的问卷表格，只需要几个字段是强制性的。如何向电子邮件字段添加电子邮件验证以确认其实际电子邮件。以及如何确认 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;
        }
    });
});
4

2 回答 2

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>

查询

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

示例 小提琴

于 2013-07-11T01:00:07.980 回答
0

查看此答案以验证您的电子邮件字段使用 jQuery 进行电子邮件验证

查看此答案以进行邮政编码验证邮政编码（美国邮政编码）验证

要输出到引导警告消息，请放置以下内容而不是您的警报...

 $(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>');
于 2013-07-11T00:59:29.070 回答