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

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

本文关键字：表单 任何内 错误 显示 如果 一个 简单 创建      更新时间：2023-09-26

我最近刚开始学习javascript，正在上一些课，对于我的一个课程，我必须创建一个简单的表单。

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

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

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

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

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

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

检查这个小提琴：

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!";
            };

        };
    };

我的建议是分小步进行;

  1. 检查是否首先调用register()函数。
  2. 在函数register中，尝试先获取一个元素值，例如通过执行、document.getElementById('name')和测试在提交时是否获得一个值来获取一个元素值，id="name"例如通过执行、和测试是否获得值。
  3. 尝试为div 设置一些值。我建议在chrome检查器控制台或Firefox检查器控制台中对此进行测试。例如，像document.getElementById('mname').innerHtml = '<span>Testing this</span>'
  4. 一旦你习惯使用各个部分，你应该能够将它们串在一起。

尝试使用此脚本，我认为它更干净一点

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

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

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>";
相关文章：