是这样的,在练习图灵出的《深入浅出JAVASCRIPT》的一个题目:
HTML部分:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="en">
<head>
<title> Date example </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.error{color:#c00;font-weight:bold;}
</style>
<script type="text/javascript" src="checkDate.js"></script>
</head>
<body>
<h1>Events search</h1>
<form action="test523.html" method="post" onsubmit="return checkDate();">
<p>
<label for="date">Date in the format DD/MM/YYYY:</label><br/>
<input type="text" id="date" name="date"/>
<input type="submit" value="Check"/>
</b/>(example 26/04/1975) <span class="error"></span>
</p>
</form>
</body>
</html>
JAVASCRIPT部分function checkDate()
{
if(!document.getElementById||!document.createTextNode){return;}
var dateField=document.getElementById('date');
if(!dateField){return;}
var errorContainer=dateField.parentNode.getElementsByTagName('span')[0];
if(!errorContainer){return;}
var checkPattern=new RegExp("\\d{2}/\\d{2}/\\d{4}");
var errorMessage='';
errorContainer.firstChild.nodeValue=' ';//设置错误Span的文本值为一个单空格,这是非常必要的,可以避免用户在没有修改错误输入并且再次提交表单时,显示多个错误信息
var dateValue=dateField.value;
if(dateValue=='')
{
errorMessage='Please provide a date.'
}
else if(!checkPattern.test(dateValue))
{
errorMessage='Please provide the date int the defined format';
}
if(errorMessage!='')
{
errorContainer.firstChild.nodeValue=errorMessage;
dateField.focus();
return false;
}
else
{
return true;
}
}然后运行出现下面错误,不知道要改哪里?
HTML部分:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html dir="ltr" lang="en">
<head>
<title> Date example </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.error{color:#c00;font-weight:bold;}
</style>
<script type="text/javascript" src="checkDate.js"></script>
</head>
<body>
<h1>Events search</h1>
<form action="test523.html" method="post" onsubmit="return checkDate();">
<p>
<label for="date">Date in the format DD/MM/YYYY:</label><br/>
<input type="text" id="date" name="date"/>
<input type="submit" value="Check"/>
</b/>(example 26/04/1975) <span class="error"></span>
</p>
</form>
</body>
</html>
JAVASCRIPT部分function checkDate()
{
if(!document.getElementById||!document.createTextNode){return;}
var dateField=document.getElementById('date');
if(!dateField){return;}
var errorContainer=dateField.parentNode.getElementsByTagName('span')[0];
if(!errorContainer){return;}
var checkPattern=new RegExp("\\d{2}/\\d{2}/\\d{4}");
var errorMessage='';
errorContainer.firstChild.nodeValue=' ';//设置错误Span的文本值为一个单空格,这是非常必要的,可以避免用户在没有修改错误输入并且再次提交表单时,显示多个错误信息
var dateValue=dateField.value;
if(dateValue=='')
{
errorMessage='Please provide a date.'
}
else if(!checkPattern.test(dateValue))
{
errorMessage='Please provide the date int the defined format';
}
if(errorMessage!='')
{
errorContainer.firstChild.nodeValue=errorMessage;
dateField.focus();
return false;
}
else
{
return true;
}
}然后运行出现下面错误,不知道要改哪里?
红色标记的标签,是<br />吗?改正后试试。
//errorContainer.firstChild.nodeValue=' ';
alert(errorContainer);
alert(errorContainer.firstChild);
alert(errorContainer.firstChild.tagName);
errorContainer.firstChild.innerHTML = '';
errorContainer.innerHTML = ''; //从你的代码来看,errorContainer已经是<span class="error"></span>这个元素对象了,它没有子节点。//这样调试一下看看神马情况。
function checkDate()
{
if(!document.getElementById||!document.createTextNode){return;}
var dateField=document.getElementById('date');
if(!dateField){return;}
var errorContainer=dateField.parentNode.getElementsByTagName('span')[0];
if(!errorContainer){return;}
var checkPattern=new RegExp("\\d{2}/\\d{2}/\\d{4}");
var errorMessage='';
if(!errorContainer.firstChild){
var oTextNode = document.createTextNode(" ");//设置错误Span的文本值为一个单空格,这是非常必要的,可以避免用户在没有修改错误输入并且再次提交表单时,显示多个错误信息
errorContainer.appendChild(oTextNode)
}
//errorContainer.firstChild.nodeValue=' ';
var dateValue=dateField.value;
if(dateValue=='')
{
errorMessage='Please provide a date.'
}
else if(!checkPattern.test(dateValue))
{
errorMessage='Please provide the date int the defined format';
}
if(errorMessage!='')
{
errorContainer.firstChild.nodeValue=errorMessage;
dateField.focus();
return false;
}
else
{
return true;
}
}
这样就有子节点的内容,问题也就解决。
直接<span class="error">(这里空一格) </span>就OK了。
-------------------
你的源码是为了用JS判断,所以:
if(!errorContainer.firstChild){
var oTextNode = document.createTextNode(" ");//设置错误Span的文本值为一个单空格,这是非常必要的,可以避免用户在没有修改错误输入并且再次提交表单时,显示多个错误信息
errorContainer.appendChild(oTextNode)
}
//errorContainer.firstChild.nodeValue=' ';
我在这里<span class="error">(这里空一格) </span>就OK了。
我试过直接空格,但报错了,求解