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

How to add email validation in bootstrap?

本文关键字：添加 电子邮件 验证      更新时间：2023-09-26

我在我的网页上使用bootstrap，并试图在该页上创建一个表单。我使用了bootstrap的标准类来制作表单。我已经使用验证来检查表单的空性。我只是想在我的代码中进一步添加电子邮件和电话号码验证。表单和已经声明的验证脚本的代码如下所示:

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

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

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

你必须需要额外的插件。试试这个:

<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>
相关文章：