多个文本框的Javascript电子邮件验证_Javascript_Css

多个文本框的Javascript电子邮件验证

javascript css

多个文本框的Javascript电子邮件验证,javascript,css,Javascript,Css,我已经创建了简单的asp页面，我已经创建了4个电子邮件文本框和“添加更多”的形式链接如果我点击“更多链接”，每次点击都会显示一个或多个电子邮件文本框现在我需要添加电子邮件验证代码，我需要显示红色边框的电子邮件文本框，如果我输入无效的电子邮件或空白字段，其中文本框有错误的字段或空白这是我的密码： Html: 我只是困惑，如何显示错误状态，如无效或空白文本框的红色边框，以及如何添加代码以获得正确的输出，我在这一行中苦苦挣扎var email=document.getElementById（“”

我已经创建了简单的asp页面，我已经创建了4个电子邮件文本框和“添加更多”的形式链接

如果我点击“更多链接”，每次点击都会显示一个或多个电子邮件文本框

现在我需要添加电子邮件验证代码，我需要显示红色边框的电子邮件文本框，如果我输入无效的电子邮件或空白字段，其中文本框有错误的字段或空白

这是我的密码：

Html:

我只是困惑，如何显示错误状态，如无效或空白文本框的红色边框，以及如何添加代码以获得正确的输出，我在这一行中苦苦挣扎

var email=document.getElementById（“”）.value
有人能帮我修一下吗？非常感谢。您好，您可以使用此类添加红色边框
CSS
在JS中，您检查类的验证（例如“电子邮件输入”），并添加错误状态，如下所示
if(!IsValidEmail)
 {
    $(this).addClass("red-border");
    $(this).focus();
 }else
 {
   $(this).removeClass("red-border");
 }

编辑：
为所有电子邮件输入框添加名为“电子邮件输入”的类
function IsValidEmail(email) {
    var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return expr.test(email);
} 
function ValidateEmail() {
    /*var email = document.getElementById("").value;*/
    var emailInputs = document.getElementsByClassName("email-input");
    for(i = 0 ; i<emailInputs .length;i++)
    {
       if(IsValidEmail(emailInputs[i].value))
       {$(this).removeClass("red-border");}
       else
       {$(this).addClass("red-border");}}
}

功能IsValidEmail（电子邮件）{
var expr=/^（[\w-\.]+）@（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[\w-]+）（[a-zA-Z]{2,4}.[0-9]{1,3}.（\]？）$/；
返回expr.test（电子邮件）；
} 
函数ValidateEmail（）{
/*var email=document.getElementById（“”）值*/
var emailInputs=document.getElementsByClassName（“电子邮件输入”）；
对于（i=0；我知道，我可以在哪里用现有代码添加您的答案？谢谢@viraj为什么您只检查一个元素emailInputs[0]
为什么不检查所有emailInputs[i]？？@rish我无法添加验证代码，因为它很好。。不需要更改，请保持原样。@viraj：请参阅我的更新帖子，我添加了完整的javascript代码。谢谢。@rish只需用此替换IsValidEmail和ValidateEmail函数。。添加一个类。红色边框是您的css文件或样式标记，并添加一个名为“emai”的类“l-输入”用于所有电子邮件输入框
.red-border{
    border: 1px solid red;
}

if(!IsValidEmail)
 {
    $(this).addClass("red-border");
    $(this).focus();
 }else
 {
   $(this).removeClass("red-border");
 }

function IsValidEmail(email) {
    var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return expr.test(email);
} 
function ValidateEmail() {
    /*var email = document.getElementById("").value;*/
    var emailInputs = document.getElementsByClassName("email-input");
    for(i = 0 ; i<emailInputs .length;i++)
    {
       if(IsValidEmail(emailInputs[i].value))
       {$(this).removeClass("red-border");}
       else
       {$(this).addClass("red-border");}}
}

<!DOCTYPE html>
<html>
<head>
<style>
.red-border{
    border: 1px solid red;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {

    // CREATE A "DIV" ELEMENT AND DESIGN IT USING JQUERY ".css()" CLASS.
    var container = $(document.createElement('div')).css({
        padding: '5px', margin: '0'});

    $(container).append('<input type=text class="input email-input"  placeholder="Email" />');
    $(container).append('<input type=text class="input email-input"  placeholder="Email" />');
    $(container).append('<input type=text class="input email-input"  placeholder="Email" />');
    $(container).append('<input type=text class="input email-input"  placeholder="Email" />');
    $('#main').before(container);   // ADD THE DIV ELEMENTS TO THE "main" CONTAINER.
//document.body.appendChild(container);
    var iCnt = 4;

    $('#btAdd').click(function() {
        if (iCnt <= 19) {

            iCnt = iCnt + 1;

            // ADD TEXTBOX.

            $(container).append('<input type=text class="input" id=tb' + iCnt + '  placeholder="Email" />');

            $('#main').before(container);   // ADD BOTH THE DIV ELEMENTS TO THE "main" CONTAINER.
        }
        else {      // AFTER REACHING THE SPECIFIED LIMIT, DISABLE THE "ADD" BUTTON. (20 IS THE LIMIT WE HAVE SET)

            $(container).append('<label>Reached the limit</label>'); 
            $('#btAdd').attr('class', 'bt-disable'); 
            $('#btAdd').attr('disabled', 'disabled');

        }
    });

    $('#btRemove').click(function() {   // REMOVE ELEMENTS ONE PER CLICK.
        if (iCnt != 0) { $('#tb' + iCnt).remove(); iCnt = iCnt - 1; }

        if (iCnt == 0) { $(container).empty(); 

            $(container).remove(); 
            $('#btSubmit').remove(); 
            $('#btAdd').removeAttr('disabled'); 
            $('#btAdd').attr('class', 'bt') 

        }
    });

    $('#btRemoveAll').click(function() {    // REMOVE ALL THE ELEMENTS IN THE CONTAINER.

        $(container).empty(); 
        $(container).remove(); 
        $('#btSubmit').remove(); iCnt = 0; 
        $('#btAdd').removeAttr('disabled'); 
        $('#btAdd').attr('class', 'bt');

    });
});

// PICK THE VALUES FROM EACH TEXTBOX WHEN "SUBMIT" BUTTON IS CLICKED.
var divValue, values = '';

function GetTextValue() {

    $(divValue).empty(); 
    $(divValue).remove(); values = '';
    $('.input').each(function() {
        divValue = $(document.createElement('div')).css({
            padding:'5px', width:'200px'
        });
 if(this.value.trim() != ''){
        if(values != ''){
            values += ',';
        }
        values += this.value.trim();
    }
});

     document.all.contact_list.value = values;            
}

function IsValidEmail(email) {
    var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    return expr.test(email);
} 

function ValidateEmail() {
    var emailInputs = document.getElementsByClassName("email-input");


    for(i = 0 ; i<emailInputs.length;i++)
    {
       if(IsValidEmail(emailInputs[i].value))
       {$(emailInputs[i]).removeClass("red-border");}
       else
       {$(emailInputs[i]).addClass("red-border");}
    }

}


</script>


</head>
<body>
<div id="main"></div>
<p>Hover the mouse pointer over this paragraph.</p>
<td valign="top" class="invite_footer">
<button id="btAdd">add</button>
<button id="btRemove">remove</button>
<button id="btRemoveAll">removeAll</button>
<input onclick = "ValidateEmail()"  style="float:right;" id="nextbutton" name="" type="button" value="Next" />
</td>
</body>
</html>