Javascript 我正在尝试验证jsp登录表单，我需要字段（标签）验证而不是警报消息

以下是我的javascript：

function checkEmail() {

    var email = document.getElementById('mLoginName');


    var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})|([0-9]{10})+$/;


    if (!filter.test(email.value)) {
        alert("Please enter valid email id or 10 digit mobile number");
        email.focus();
        return false;
    }
}

HTML代码：

<form:form method="post" onsubmit="return checkEmail();" action="SignIn"  modelAttribute="memberBean" >
    <form:input type='hidden' name='mode' id='mode' path='mode' />
    <form:input type='text'  class="input" name='mLoginName'  id='mLoginName' path='mLoginName' onblur="checkInp()" placeholder='Email/Mobile' />

<input type='submit' class="submit" value='SignIn/SignUp' >
</form:form>

您只需在输入后添加一个

（或一个

，具体取决于您希望它的外观），然后在代码中添加

document.getElementById('mLoginValidate').innerHTML = "Please enter valid email id or 10 digit mobile number";

当用户开始重新键入时，您还可以将其css更改为

display:none

，然后在验证失败时将其更改回do

display:block

这里有一把小小提琴：

以下是我所做的：
HTML:

<input type='text'  ... onkeydown="hideError()" />
<span id="mLoginValidate">Please enter valid email id or 10 digit mobile number</span>

span {
  color: red;
  display: none;
}

function hideError() {
    document.getElementById("mLoginValidate").style.display = "none";
} 

JAVASCRIPT:

<input type='text'  ... onkeydown="hideError()" />
<span id="mLoginValidate">Please enter valid email id or 10 digit mobile number</span>

span {
  color: red;
  display: none;
}

function hideError() {
    document.getElementById("mLoginValidate").style.display = "none";
} 

在checkEmail（）函数中：

---

如果您感兴趣，可以看看jqueryvalidate插件，它有处理客户端验证的便捷工具：HTML代码：您能告诉我在代码中添加span标记的位置吗。我试过了，但没有收到错误消息。请将您的HTML添加到您的帖子中，否则我将无能为力。但基本上，把它放在您的inputHTML代码后面：我刚刚编辑了我的答案并添加了一个提琴供您尝试