Question

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

Answer 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>

THE 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

Answer 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>');

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

2 个答案: