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

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

您应该使用评论中提到的正则表达式。这里也提到了正则表达式。

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

这是一个工作示例。