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

How to show particular textbox border red color if i enter invalid email or blank in javascript?

本文关键字：显示 红色 边框 文本 何显示 javascript 输入 无效 如果 空白 电子邮件      更新时间：2023-09-26

我已经创建了四个电子邮件文本框和"更多"链接。

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

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

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

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

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

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

参见 jsfiddle 示例。

网页代码：

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

.CSS：

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

var container = $(document.createElement('div')).css({
            padding: '5px', margin: '0'});
// add several <div><input ...><label>...</label></div>
for (i = 0; i < 5; i++) {
    $(container)
        .append('<div><input type="text" class="input" id="tb'+i+'" placeholder="Email" /> <label>This email is invalid</label></div>');
}
$('#main').before(container);   // ADD THE DIV ELEMENTS TO THE "main" CONTAINER.
// Validate input on every keyup()-event
$("input", container).keyup(function() {
    validateEmail($(this));
});
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(el) {
    if (!isValidEmail($(el).val())) {
        $(el).parent().addClass('invalid');
        return false;
    } else {
        $(el).parent().removeClass('invalid');
        return true;
    }
}
相关文章：