Question

我已创建了四个电子邮件文本框以及“更多”链接。

如果我点击更多链接，它会在每个链接显示另外一个文本框。

现在，当我输入无效的电子邮件或空白字段时，我正在努力解决显示错误状态。这是我的代码：

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

使用Javascript：

var container = $(document.createElement('div')).css({
            padding: '5px', margin: '0'});

        $(container).append('<input type=text class="input" id="tb1" placeholder="Email" />');
        $(container).append('<input type=text class="input" id="tb2" placeholder="Email" />');
        $(container).append('<input type=text class="input" id="tb3" placeholder="Email" />');
        $(container).append('<input type=text class="input" id="tb4" placeholder="Email" />');
        $('#main').before(container);   // ADD THE DIV ELEMENTS TO THE "main" CONTAINER.

        var iCnt = 4;

    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("tb1").value;
                if (!IsValidEmail(email)) {
                    document.getElementById('tb1').style.border = "solid 1px red";
                  return false;
            }

我需要显示红色文本框，其中特定字段为空白或无效的电子邮件。

我可以知道，我怎样才能实现这一目标？

Answer 1

您可以在keyup()上使用JQuery的inputs方法在每次输入或删除任何字符时验证电子邮件。如果特定电子邮件无效，请将css类invalid添加到其父div（将每个input放入单独的div），然后您可以为所有{{1}着色来自inputs的儿童被标记为无效（div）。您还可以在每个输入旁边添加.invalid input，仅当其父labels被标记为无效时才会显示。然后这些标签包含错误消息。

请参阅jsfiddle示例。

HTML码：

div

CSS：

<div id="main"></div>
<input id="nextbutton" name="" type="submit" value="Next" />

JavaScript的：

.invalid input {
    background-color:#fee;
    border:1px solid red;
}
.invalid label {
    display:inline-block;
}

input {
    margin:5px;
    padding:2px;
    border:1px solid green;
}
label {
    display:none;
}

如果我在javascript中输入无效的电子邮件或空白，如何显示特定的文本框边框红色？

1 个答案: