如何在引导程序中添加电子邮件验证？

Question

我在我的网页中使用引导程序并尝试在该页面上创建一个表单。 我已经使用标准的引导类来制作表单。我已经使用验证来检查表单的空虚性。我只想在我的代码中进一步添加电子邮件和电话号码验证。 表单代码和已经声明的验证脚本如下：

<script type="text/javascript">
function validateText(id) {
    if ($("#" + id).val() == null || $("#" + id).val() == "") {
        var div = $("#" + id).closest("div");
        div.removeClass("has-success");
        $("#glypcn" + id).remove();
        div.addClass("has-error has-feedback");
        div.append('<span id="glypcn' + id
           + '" class="glyphicon glyphicon-remove form-control-feedback"></span>');
        return false;
    } else {
        var div = $("#" + id).closest("div");
        div.removeClass("has-error");
        $("#glypcn" + id).remove();
        div.addClass("has-success has-feedback");
        div.append('<span id="glypcn' + id
               + '" class="glyphicon glyphicon-ok form-control-feedback"></span>');
        return true;
    }
}

$(document).ready(function() {
    $("#contactButton").click(function() {
        if (!validateText("contactName")) {
            return false;
        }
        if (!validateText("contactEmail")) {
            return false;
        }
        if (!validateText("contactMobile")) {
            return false;
        }
        if (!validateText("contactAddress1")) {
            return false;
        }
        if (!validateText("contactCity")) {
            return false;
        }
        $("form#contactForm").submit();
    }
);
});

<form class="form-horizontal" id="contactForm">
<div class="form-group">
    <label for="contactName" class="col-sm-2 control-label">Name<sup>*</sup></label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="contactName">
    </div>
</div>
<div class="form-group">
    <label for="contactEmail" class="col-sm-2 control-label">Email<sup>*</sup></label>
    <div class="col-sm-10">
        <input type="email" class="form-control" id="contactEmail">
    </div>
</div>
<div class="form-group">
    <label for="contactMobile" class="col-sm-2 control-label">Mobile
        Number<sup>*</sup>
    </label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="contactMobile">
    </div>  
</div>
<div class="form-group">
    <label for="contactAddress1" class="col-sm-2 control-label">Address1<sup>*</sup></label>
    <div class="col-sm-10">
        <textarea class="form-control" rows="5" id="contactAddress1"></textarea>
    </div>  
</div>
<div class="form-group">
    <label for="contactAddress2" class="col-sm-2 control-label">Address2</label>
    <div class="col-sm-10">
        <textarea class="form-control" rows="5" id="contactAddress2"></textarea>
    </div>  
</div>
<div class="form-group">
    <label for="contactCity" class="col-sm-2 control-label">City<sup>*</sup></label>
    <div class="col-sm-10">
        <select class="form-control" id="contactCity">
            <option>KURUKSHETRA</option>
            <option>PEHOWA</option>
            <option>KARNAL</option>
        </select>   
    </div>  
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
    <p>     
        <span id="helpBlock" class="help-block"><sup>*</sup> marked fields
            are compulsory!</span>
    </p>    
</div>
<div class="checkbox">
    <label> <input type="checkbox"> I agree to the <a href="#">Terms of
            Service</a>     
    </label>
</div>
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
    <center>
        <p>
            <button type="button" class="btn btn-primary btn-lg btn-block"
                id="contactButton">
                Submit <span class="glyphicon glyphicon-arrow-right"> </span>
            </button>
        </p>
    </center>
</div>
</form>

Answer 1

您应该使用评论中提到的正则表达式。 还提到了正则表达式here。

var email_regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;

Here 是一个工作示例。

Answer 2

你必须为此需要额外的插件。 试试这个：

<form id="emailForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-7">
            <input type="text" class="form-control" name="email" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#emailForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            email: {
                validators: {
                    emailAddress: {
                        message: 'The value is not a valid email address'
                    }
                }
            }
        }
    });
});
</script>