Question

我需要制作一个标记按钮，检查我上面的所有前面的框，然后通过在按钮后面的状态显示状态而不弹出警报来报告它们是否有效，我这样做在JavaScript中，所以任何帮助将不胜感激。

这是我到目前为止所做的：

<!DOCTYPE html>
    <html>
        <head>
        <script>
            function myFunction(x){
                x.style.background="yellow";
            }

            function validateForm(){
                var Fid=document.getElementById("firstName").value;
                if (Fid.length < 3) {
                    alert("first id is not valid");
                    return;
                }
                var Lid=document.getElementById("lastName").value;
               if (Lid.length < 3) {
                   alert("Last id is not valid");
                   return;
               }

               var Age=document.getElementById("age").value;
               if (Age.length == 0) {
                   alert("Age is not valid");
                   return;
               }
           } //End validateForm()

           <script language="javascript">
               function checkEmail() {

                   var email = document.getElementById("email");
                   var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                   if (!filter.test(email.value)) {
                       alert("Please provide a valid email address");
                       email.focus;
                       return false;
                   }
               } 
           </script>
     </script>
 </head>
 <body>
       First id: <input type="text" id="firstName" onFocus="myFunction(this)"><br>
      Last id: <input type="text" id="lastName" onFocus="myFunction(this)"><br>
      Age: <input type="text" id="age" onFocus="myFunction(this)"><br>
      E-mail address: <input type="text" id="email" onFocus="myFunction(this)"><br>
     <label id="status">status</label><br>
     <button id="CheckButton" onClick="return validateForm();">Check Form</button>
 </body>
</html>

Answer 1

不要提醒，只需设置状态标签的innerHTML：

var Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
    var status = document.getElementById('status');
    status.innerHTML = status.innerHTML + '<br>First id is not valid';
    //alert("first id is not valid");
    return;
}

根据您的评论，修改您的HTML，如下所示：

First id: <input type="text" id="firstName" onFocus="myFunction(this)"><br>
Last id: <input type="text" id="lastName" onFocus="myFunction(this)"><br>
Age: <input type="text" id="age" onFocus="myFunction(this)"><br>
E-mail address: <input type="text" id="email" onFocus="myFunction(this)"><br>
<span id="status">status</span><br>
<div id='firstNameDiv' style='display: none'>First id is not valid</div>
<div id='lastNameDiv' style='display: none'>Last is id not valid</div>
<div id='ageDiv' style='display: none'>Age is not valid</div>
<div id='emailDiv' style='display: none'>Email is not valid</div>
<button id="CheckButton" onClick="return validateForm();">Check Form</button>

你的javascript就像这样：

var Fid=document.getElementById("firstName").value;
if (Fid.length < 3) {
    document.getElementById('firstNameDiv').style.display = "";
}
else {
    document.getElementById('firstNameDiv').style.display = 'none';
}

我需要帮助制作状态栏标签

1 个答案: