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

Question

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

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

Answer 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>

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

html- input background color update on validation

html

css

jquery

html5-canvas