Javascript未验证字段
Javascript not validating fields
我有以下代码片段。由于某些原因，验证不起作用。
我试图验证两件事：
- 没有文本字段为空
- 密码字段至少有8个字符
如果其中任何一个是假的，我就会得到一个错误。但此错误消息从未显示。以下是片段：
function validate() {
if (document.getElementById("name").value == '') {
document.getElementById("errorMsg").value=="You have forgotten to enter your name";
}
else if (document.getElementById("surname").value == '') {
document.getElementById("errorMsg").value == "You have forgotten to enter your surname";
}
else if (document.getElementById("email").value == '') {
document.getElementById("errorMsg").value == "You have forgotten to enter your email address";
}
}* {
margin: 0px;
padding: 0px;
}
#title{
font: bold 20px Tahoma;
color: white;
margin: 10px;
text-align: left;
width: 80%;
}
#header{
padding: 80px;
font: 14px Tahoma;
}
body{
width:100%;
display:-webkit-box;
-webkit-box-pack: center;
}
#main_container{
max-width: 1000px;
margin: 10px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#control-container{
display:-webkit-box;
-webkit-box-orient: horizontal;
}
#label-container{
-webkit-box-flex: 1;
margin: 10px;
}
p {
font: 14px Tahoma;
margin: 20px;
width: 350px;
height: 30px;
}
#element-container{
width: 500px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
}
#name{
font: 14px Tahoma;
margin: 10px;
width: 350px;
height: 30px;
}
#surname{
font: 14px Tahoma;
margin: 10px;
width: 350px;
height: 30px;
}
#email{
font: 14px Tahoma;
margin: 10px;
width: 350px;
height: 30px;
}
#password{
font: 14px Tahoma;
margin: 10px;
width: 350px;
height: 30px;
}
input[type="text"]:focus{
outline: none;
box-shadow: 0px 0px 5px #7f0000;
border:1px solid #b20000;
}
input[type="text"]:hover{
border: 1px solid #999;
}
input[type="text"]:focus:hover{
outline: none;
box-shadow: 0px 0px 5px #7f0000;
border:1px solid #b20000;
}
input[type="password"]:focus{
outline: none;
box-shadow: 0px 0px 5px #7f0000;
border:1px solid #b20000;
}
input[type="password"]:hover{
border: 1px solid #999;
border-radius: 0px;
}
input[type="password"]:focus:hover{
outline: none;
box-shadow: 0px 0px 5px #7f0000;
border:1px solid #b20000;
border-radius:0;
}
#register{
font: 14px Tahoma;
margin: 20px;
text-align: center;
}
#btnRegister {
width: 100px;
height: 30px;
margin: 20px;
text-align: center;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fastloader - Register for a new account</title>
<link rel="stylesheet" href="register.css">
<script src="register.js"></script>
</head>
<body>
<div id = "main-container">
<header id = "header">
<h1>Register for a new account<h1>
</header>
<div id= "control-container">
<section id ="label-container">
<p><label>Enter your Name:</label></p>
<p><label>Enter your Surname:</label></p>
<p><label>Enter your Email address:</label></p>
<p><label>Choose a strong Password:</label></p>
</section>
<section id = "element-container">
<div id = "name">
<input name="Name" type="text" id="name"/>
</div>
<div id = "surname">
<input name="Surname" type="text" id="surname"/>
</div>
<div id = "email">
<input name="Email" type="text" id="email" />
</div>
<div id = "password">
<input name="Password" type="password" id = "password"/>
</div>
</section>
</div>
<footer id = "register">
<div id = "agreement">
<label>I have read the Terms and Conditions:</label>
<input name="agree" type="checkbox" id="agree" />
</div>
<div id = "error">
<p><label id = "errorMsg"></label></p>
</div>
<div id = "button">
<input type = "button"
id="btnRegister"
value = "Register"
onclick="validate();"/>
</div>
</footer>
</div>
</body>
</html>document.getElementById("errorMsg").value == "You have forgotten to enter your email address";
您使用了
==，它用于比较，而不是设置新值。在那里你只能使用=标签没有
value，正确的方式是.innerText
我就是这样解决的：
function validate() {
if (document.getElementById('name').value.length == 0) {
alert("You have forgotten to enter your name");
} else if (document.getElementById("surname").value.length == 0) {
alert("You have forgotten to enter your surname");
} else if (document.getElementById("email").value.length == 0) {
alert("You have forgotten to enter your email address");
}
}* {
margin: 0px;
padding: 0px;
}
#title{
font: bold 20px Tahoma;
color: white;
margin: 10px;
text-align: left;
width: 80%;
}
#header{
padding: 80px;
font: 14px Tahoma;
}
body{
width:100%;
display:-webkit-box;
-webkit-box-pack: center;
}
#main_container{
max-width: 1000px;
margin: 10px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#control-container{
display:-webkit-box;
-webkit-box-orient: horizontal;
}
#label-container{
-webkit-box-flex: 1;
margin: 10px;
}
p {
font: 14px Tahoma;
margin: 20px;
width: 350px;
height: 30px;
}
#element-container{
width: 500px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
}
#name{
font: 14px Tahoma;
margin: 10px;
width: 350px;
height: 30px;
}
#surname{
font: 14px Tahoma;
margin: 10px;
width: 350px;
height: 30px;
}
#email{
font: 14px Tahoma;
margin: 10px;
width: 350px;
height: 30px;
}
#password{
font: 14px Tahoma;
margin: 10px;
width: 350px;
height: 30px;
}
input[type="text"]:focus{
outline: none;
box-shadow: 0px 0px 5px #7f0000;
border:1px solid #b20000;
}
input[type="text"]:hover{
border: 1px solid #999;
}
input[type="text"]:focus:hover{
outline: none;
box-shadow: 0px 0px 5px #7f0000;
border:1px solid #b20000;
}
input[type="password"]:focus{
outline: none;
box-shadow: 0px 0px 5px #7f0000;
border:1px solid #b20000;
}
input[type="password"]:hover{
border: 1px solid #999;
border-radius: 0px;
}
input[type="password"]:focus:hover{
outline: none;
box-shadow: 0px 0px 5px #7f0000;
border:1px solid #b20000;
border-radius:0;
}
#register{
font: 14px Tahoma;
margin: 20px;
text-align: center;
}
#btnRegister {
width: 100px;
height: 30px;
margin: 20px;
text-align: center;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fastloader - Register for a new account</title>
<link rel="stylesheet" href="register.css">
<script src="register.js"></script>
</head>
<body>
<div id = "main-container">
<header id = "header">
<h1>Register for a new account<h1>
</header>
<div id= "control-container">
<section id ="label-container">
<p><label>Enter your Name:</label></p>
<p><label>Enter your Surname:</label></p>
<p><label>Enter your Email address:</label></p>
<p><label>Choose a strong Password:</label></p>
</section>
<section id = "element-container">
<div id = "name_container">
<input name="Name" type="text" id="name"/>
</div>
<div id = "surname_container">
<input name="Surname" type="text" id="surname"/>
</div>
<div id = "email_container">
<input name="Email" type="text" id="email" />
</div>
<div id = "password_container">
<input name="Password" type="password" id = "password"/>
</div>
</section>
</div>
<footer id = "register">
<div id = "agreement">
<label>I have read the Terms and Conditions:</label>
<input name="agree" type="checkbox" id="agree" />
</div>
<div id = "error">
<p><label id = "errorMsg"></label></p>
</div>
<div id = "button">
<input type = "button"
id="btnRegister"
value = "Register"
onclick="validate();"/>
</div>
</footer>
</div>
</body>
</html>相关文章：
- Rad网格编辑模式通过选中复选框时的java脚本启用禁用所需的字段验证器
- 回发前所需的字段验证程序不起作用
- 将字段设置为有条件地使用所需的字段验证器
- .NET MVC 5 不显眼的禁用字段验证
- Liferay网络表单组件字段验证
- 输入字段验证的键代码函数在chrome中没有按预期工作
- MVC 5防止隐藏字段的必需字段验证
- jQuery字段验证-是否为空，以及正确的值
- JS如何捕获基于键入然后删除的字符的字段验证逻辑
- Javascript Wordpress字段验证匹配
- 字段验证器，它不允许移动到下一个字段
- 在更改另一个字段时触发Yii字段验证
- 进度条和所需字段验证器
- 字段验证:字段需要 JavaScript 正则表达式
- JS 字段验证 - 循环遍历对象，每个字段有三个数据注意事项
- Javascript 空字段验证 - 无法读取未定义的属性“值”
- 有没有办法知道 .net 必填字段验证器是否从 js 启用或禁用
- 避免在字段验证失败时调用 AJAX onsuccess
- 使用 jQuery 使用 asp.net 必填字段验证器验证必填字段
- 如何使用 Angular.js/Javascript 为 url 添加输入字段验证
