Question

它将如何工作？我想知道javascript如何与html和div标签连接正确。我没弄清楚哪个代码做错了。

	<script type="text/javascript">

    	function validate()
    	{
    		if (document.myForm.name.value="") {
    			alert("should be fill");
    			document.myForm.name.focus();
    			return false;
    		}
    		return(true);
    		}
    		

    </script>

.container{background-color:gray;
width:550px;
height:650px;
align-content:center;
background: rgba(255, 255, 255, 0.1);}

h1{text-align:center;
color:darkslategray;
text-decoration-line:underline;}

input{width:100%}

#button{text-align:right;}

body {background-image:url("bg1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    
     <link rel="stylesheet" href="css\bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css\custom.css">
   <script type="text/javascript" src="js/jquery.js"></script>
   <script type="text/javascript" src="js/bootstrap.min.js"></script>
    
	<title>
		login form
	</title>
</head>
<body>
		<div class="container">
			<form method="post" name="myForm" onsubmit="return(validate());" data-toggle="validator">
				<div class="form-group">
					<h1><b><u>
						Create an account
						</u>
					</h1>
					
						<div class="row">
							<div class="col-md-6">
								First Name:
								<input type="text" name="name" id="" value="" placeholder="First Name">
								
								<span id="fnameerror" class="text-danger">
								</span>

							</div>
							<div class="col-md-6">
								Last Name:
								<input type="text" name="lastname" id="lastname" placeholder="Last Name" >
								<span id="lnameerror" class="text-danger">
								</span>
							</div>		
						</div>
					<br>
						<div class="row">
							<div class="col-md-12">
							Company Name:
							<input type="text" name="companyname" id="" placeholder="Company Name">
							<span id="" class="text-danger">
								</span>
							</div>
						</div>
					<br>	
						<div class="row">
							<div class="col-md-12">
							Street address:
							<input type="text" name="streetaddress" id="address" placeholder="Street address">
							<span id="adderror" class="text-danger">
								</span>
							</div>
						</div>
					<br>	
						<div class="row">
							<div class="col-md-12">
							Town/City:
							<input type="text" name="city" id="city" placeholder="Town/City">
							<span id="cityerror" class="text-danger">
								</span>
							</div>
						</div>
					<br>	
						<div class="row">
							<div class="col-md-12">
							State/Country:
							<input type="text" name="state" id="state" placeholder="State/Country">
							<span id="stateerror" class="text-danger">
								</span>
							</div>
						</div>
					<br>	
						<div class="row">
							<div class="col-md-12">
							Postcode/Zip:
							<input type="text" name="zip" id="zip" placeholder="Postcode/Zip">
							<span id="ziperror" class="text-danger">
								</span>
							</div>
						</div>
					<br>
						<div class="row">
							<div class="col-md-6">
								Phone:
								<input type="text" name="Phone" id="phone" placeholder="Phone">
							<span id="pherror" class="text-danger">
								</span>
							</div>
							<div class="col-md-6">
								Email:								
								<input type="emaill" name="Email" id="email" placeholder="Email">
							<span id="emailerror" class="text-danger">
								</span>
							</div>
						</div>
						
						<div class="row">
							<div class="col-md-1">
							<input type="checkbox" name="checkbox" id="box" placeholder="">
							<span id="boxerror" class="text-danger">
								</span>
							</div>
							<div class="col-md-11">
								Create an account
							</div>		
						</div>

						<div class="row" id="button">
							<div class="col-md-12">
								<button type="submit" value="submit">
									<b>SignUp</b>
								</button>
							</div>	
						</div>
				</div>
			</form>
	</div>

</body>
</html>

Answer 1

您在if (document.myForm.name.value = "")中使用赋值运算符

尝试使用此代码

 function validate() {
    if (document.forms["myForm"]["name"].value == "") {
      alert("should be fill");
      document.myForm.name.focus();
      return false;
    }
    return (true);
  }

Answer 2

您在比较中错过了等于==的地方。为了进行比较，应为==双重等于。更改它，它应该可以工作。

if (document.myForm.name.value == "") {
     ...
}

Answer 3

似乎您尚未在html文件中添加js文件。在结束body标签上方添加js文件。

<script type="text/javascript" src="location to the file"><script>

此外，使用以下命令更新js代码：

function validate(e) {
    e.preventDefault();
    console.log(document.myForm.name.value);
    if (document.myForm.name.value == "") {
      alert("should be fill");
      document.myForm.name.focus();
    }
  }

您还需要修改form元素。

<form method="post" name="myForm" onsubmit="validate(event);" data-toggle="validator">

在此代码中，javascript验证不起作用

3 个答案: