html-验证时输入背景颜色更新答案

【问题标题】：html- input background color update on validationhtml-验证时输入背景颜色更新
【发布时间】：2021-11-21 17:17:26
【问题描述】：

我希望在客户端插入非法电子邮件输入时更新输入背景颜色。当前代码不起作用。我错过了什么？

<input id="signup" type="submit" value="SIGN UP">
            <div id="email">
                <input type="email" id="inputMail" placeholder="Email">
                <img src="C:\Users\okazi\Desktop\email.png" id="imageMail">
            </div>

            <script type="text/javascript">
            var errorMassage = "";

            function isEmail(inputMail) 
            {
                var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                return regex.test(inputMail);
            }

            $("#signup").click(function ()
            {
                if (isEmail($(inputMail).val()) == false)
                {
                    $("inputMail").css("background-color", "red");
                }

                alert(errorMassage);
            })
            </script>

【问题讨论】：

在您的代码中，您在 id 名称前缺少“#”... $("#inputMail").css("background-color", "red");
谢谢它帮助我，另一个我试图让边框颜色而不是背景颜色但它不起作用$("#inputMail").css("border-color", "red");

标签： html jquery css html5-canvas

【解决方案1】：

你在这里：

var errorMassage = "";

function isEmail(inputMail) {
  var regex =
    /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(inputMail);
}

$("#signup").click(function() {
  if (isEmail($(inputMail).val()) == false) {
    $("#inputMail").css("background-color", "red");
  }

  alert(errorMassage);
});

<input id="signup" type="submit" value="SIGN UP" />
<div id="email">
  <input type="email" id="inputMail" placeholder="Email" />
  <img src="C:\Users\okazi\Desktop\TheKazim\photos\email.png" id="imageMail" />
</div>

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

另外，要更改边框颜色而不是背景颜色替换 $("#inputMail").css("background-color", "red"); $("#inputMail").css("border-color", "red"); 如下：

var errorMassage = "";

function isEmail(inputMail) {
  var regex =
    /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(inputMail);
}

$("#signup").click(function() {
  if (isEmail($(inputMail).val()) == false) {
    $("#inputMail").css("border-color", "red");
  }

  alert(errorMassage);
});

<input id="signup" type="submit" value="SIGN UP" />
<div id="email">
  <input type="email" id="inputMail" placeholder="Email" />
  <img src="C:\Users\okazi\Desktop\TheKazim\photos\email.png" id="imageMail" />
</div>

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

【讨论】：