尝试创建一个简单的表单，如果没有填写任何内容将显示错误

Question

我最近刚开始学习 javascript，并且正在学习一些类，为了我的类，我不得不创建一个简单的表格。

如果在按下提交按钮时没有填写表单，应该会有 javascript 显示错误消息。

按下按钮时没有任何反应，我什至不确定该功能是否正在运行。

我没有输入任何 "document.write"s，我一步一步地按照说明操作，但仍然无法正常工作。

如果能得到任何帮助，我将不胜感激，非常感谢。

<html>



<head>
<title>My Form</title>
</head>
<body>
<script type="text/javascript">


function register(){

 var x = new Array();
 x[0] = document.getElementById('name').value;
 x[1] = document.getElementById('lname').value;
 x[2] = document.getElementById('email').value;
 x[3] = document.getElementById('pw').value;
 x[4] = document.getElementById('pwc').value;
 
 var h = new Array();
 h[0] = <span style="color:'red'>Please type first name!</span>";
 h[1] = <span style="color:'red'>Please type last name!</span>";
 h[2] = <span style="color:'red'>Please type email!</span>";
 h[3] = <span style="color:'red'>Please type a password!</span>";
 h[4] = <span style="color:'red'>Please confirm password!</span>";
 
 var divs = new Array("mname", "mlname", "memail", "mpw", "mpwc");
 
   for(i in x){
   
   
    var error = h[i];
    var div = divs[i];
    
    
    if(x[i])==""){
    
    
     document.getElementById(div).innerHTML = error;
    
    }else{
    
     document.getElementById(div).innerHTML = "OK!";
              
    };
   
   
   };
  };

</script>



<form>

 <table border="1">
  <tr><td>First Name:</td><td><input type="text" name="name" id="name" /></td><td><div id ="mname"></div></td></tr>
  <tr><td>Last Name:</td><td><input type="text" name="lname" id="lname"/></td><td><div id ="mlname"></div></td></tr>
  <tr><td>Email:</td><td><input type="text" name="email" id="email"/></td><td><div id ="memail"></div></td></tr>
  <tr><td>Password:</td><td><input type="text" name="pw" id="pw"/></td><td><div id ="mpw"></div></td></tr>
  <tr><td>Confirm Password:</td><td><input type="text" name="pwc" id="pwc"/></td><td><div id ="mpwc"></div></td></tr>
 </table>
 <br />
<input type="button" name="submit" value="submit" onclick="register();" />

</form>




</body>


</html>

Answer 1

您在定义错误消息时遇到语法错误：

var h = new Array();
h[0] = <span style="color:'red'>Please type first name!</span>";
h[1] = <span style="color:'red'>Please type last name!</span>";
h[2] = <span style="color:'red'>Please type email!</span>";
h[3] = <span style="color:'red'>Please type a password!</span>";
h[4] = <span style="color:'red'>Please confirm password!</span>";

您应该在引号之间交替使用（即，将整个字符串用 ' 包裹起来，然后在内部使用 "，反之亦然），或者像这样转义字符串中的双引号。

var h = new Array();
h[0] = "<span style=\"color:red\">Please type first name!</span>";
h[1] = "<span style=\"color:red\">Please type last name!</span>";
h[2] = "<span style=\"color:red\">Please type email!</span>";
h[3] = "<span style=\"color:red\">Please type a password!</span>";
h[4] = "<span style=\"color:red\">Please confirm password!</span>";

Answer 2

我的建议是循序渐进；

检查 register() 函数是否首先被调用。
在 register 函数中，首先尝试获取一个元素值，例如 id="name" 通过执行 document.getElementById('name') 并测试当您提交指定值时是否获取值对于名称字段。
尝试为 div 设置一些值。我建议在 chrome inspector console 或 firefox inspector console 中测试这个。例如 document.getElementById('mname').innerHtml = '<span>Testing this</span>'
一旦您熟练地使用了div两部分，您应该能够将它们串起来。

Answer 3

试试这个脚本，我觉得它更干净一些

 <script type="text/javascript">


function register(){

    var name = document.getElementById('name').value,
        lName = document.getElementById('lname').value,
        email = document.getElementById('email').value,
        pw = document.getElementById('pw').value,
        pwc = document.getElementById('pwc').value;
          if(name !== '' && lName !== ''&& email !== '' && pw !== '' && pwc !== ''){
                 alert("succes");
            }else{
                  alert("sorry fill all inputs");
              }
        };

</script>

Answer 4

你犯了一些错误，一个在 span 字符串中，另一个在 if 语句中。休息一切看起来很好！

检查这个 fiddle:

http://jsfiddle.net/zog1h7f6/

function register(){

var x = new Array();
x[0] = document.getElementById('name').value;
x[1] = document.getElementById('lname').value;
x[2] = document.getElementById('email').value;
x[3] = document.getElementById('pw').value;
x[4] = document.getElementById('pwc').value;

var h = new Array();
h[0] = "<span style=color:red>Please type first name!</span>";
h[1] = "<span style=color:red>Please type last name!</span>";
h[2] = "<span style=color:red>Please type email!</span>";
h[3] = "<span style=color:red>Please type a password!</span>";
h[4] = "<span style=color:red>Please confirm password!</span>";

var divs = new Array("mname", "mlname", "memail", "mpw", "mpwc");

        for(i in x){


            var error = h[i];
            var div = divs[i];


            if(x[i]===''){

                document.getElementById(div).innerHTML = error;

            }else{

                document.getElementById(div).innerHTML = "OK!";

            };


        };
    };

尝试创建一个简单的表单，如果没有填写任何内容将显示错误

Trying to create a simple form that will display an error if nothing is filled in

html

javascript

forms

innerhtml