Question

我已经创建了简单的asp页面，我已经创建了4个电子邮件文本框和＆＃34;添加更多＆＃34;表格中的链接。

如果我点击＆＃34;更多链接＆＃34;，则会在每次点击时再显示一个电子邮件文本框。

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

这是我的代码：

HTML：

<td valign="top" class="invite_footer">
<input onclick = "ValidateEmail()"  style="float:right;" id="nextbutton" name="" type="submit" value="Next" />
</td>

我在网上使用了以下代码：

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;
    if (!IsValidEmail(email)) {
        alert("Invalid email address.");
    }
}

我只是感到困惑，如何显示错误状态，如我的无效或空白文本框的红色边框，以及如何添加正确输出的代码，我在这一行中挣扎var email = document.getElementById("").value;

任何人都可以帮我解决这个问题吗？非常感谢你。

Answer 1

您好，您可以使用此类添加红色边框 CSS

.red-border{
    border: 1px solid red;
}

并在JS中检查课程的验证（例如＆＃39;电子邮件输入＆＃39;）并添加如下错误状态。

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

编辑：添加一个名为＆＃39; email-input＆＃39;适用于所有电子邮件输入框

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>

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

1 个答案: