输入非法邮箱时更新input背景色，现有代码不生效是缺失了什么？

你代码存在以下几个问题： #

• jQuery 选择 ID 元素时必须加前缀#，你代码里的$(inputMail)、$("inputMail")都无法正确选中邮箱输入框，正确写法是$("#inputMail")
• 提交按钮是type="submit"，点击后会默认触发表单提交刷新页面，样式修改的效果会被刷新覆盖，需要阻止默认提交行为
• errorMassage变量全程没有赋值，所以弹出的提示框始终是空内容
• 缺少邮箱校验合法时的样式重置逻辑，一旦输入不合法变红后无法恢复正常样式
• 额外注意：你使用了jQuery语法，必须在代码前引入jQuery库，否则所有$相关的逻辑都会报错无法执行

修复后的完整代码： #

<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(emailStr) 
{
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(emailStr);
}

$("#signup").click(function (e)
{
    // 阻止表单默认提交刷新行为
    e.preventDefault();
    var inputVal = $("#inputMail").val();
    if (!isEmail(inputVal))
    {
        errorMassage = "请输入合法的邮箱地址";
        // 用低透明度红色视觉更友好，也可以直接改成red
        $("#inputMail").css("background-color", "rgba(255,0,0,0.2)");
    } else {
        errorMassage = "邮箱校验通过";
        $("#inputMail").css("background-color", "#fff");
        // 校验通过后可在这里添加表单提交逻辑
    }
    alert(errorMassage);
})
</script>

内容的提问来源于stack exchange，提问作者OMR