suj*_*325 0 html javascript forms validation
此功能用于验证.如果它是空的,它会打印错误,并在文本框旁边显示红色或绿色以及OK消息.
JavaScript的
function validatebox()
{
var fn = document.geElementById("fn").value;
if (fn==null || fn=="")
{
document.geElementById("error_fn").innerHTML="please fill your first name";
document.geElementById("error_fn").style.color="red";
}
else
{
document.geElementById("error_fn").innerHTML="OK";
document.geElementById("error_fn").style.color="green";
}
我试图在文本框旁边显示错误消息,但它无法正常工作.
HTML
<form name="signup" action="singup_i" method="post">
First name:
<input type="text" id="fn" onblur="validatebox()" name="fn" size="15"/>
<label id="error_fn"></label>
<input type="submit" value="submit"> <input type="reset" value="reset">
</from>
三个问题:
它是getElementById(注意t),而不是geElementById.
你错过了}函数的结尾.
表单的结束标记</from>不是</form>
您的浏览器可能至少告诉您至少前两个:在所有现代浏览器中,都有一整套开发/调试工具.对于IE和Chrome(至少),只需按F12即可.对于其他人,请查看菜单.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Example</title>
</head>
<body>
<form name="signup" action="singup_i" method="post">
First name:<input type="text" id="fn" onblur="validatebox()" name="fn" size="15"/>
<label id="error_fn"></label>
<input type="submit" value="submit"> <input type="reset" value="reset">
</from>
<script>
function validatebox() {
var fn = document.getElementById("fn").value;
if (fn == null || fn == "") {
document.getElementById("error_fn").innerHTML = "please fill your first name";
document.getElementById("error_fn").style.color = "red";
}
else {
document.getElementById("error_fn").innerHTML = "OK";
document.getElementById("error_fn").style.color = "green";
}
}
</script>
</body>
</html>
请注意,我已经重新格式化了功能代码,因此更容易看到块(因此看到结尾}).
但是我可以建议不要error_fn反复查找,而不是使用label元素来标记字段以外的其他内容:Live Copy | 直播源
<form name="signup" action="singup_i" method="post">
First name:<input type="text" id="fn" onblur="validatebox()" name="fn" size="15"/>
<span id="error_fn"></span>
<input type="submit" value="submit"> <input type="reset" value="reset">
</form>
<script>
function validatebox() {
var fn = document.getElementById("fn").value;
var err = document.getElementById("error_fn");
if (fn == null || fn == "") {
err.innerHTML = "please fill your first name";
err.style.color = "red";
}
else {
err.innerHTML = "OK";
err.style.color = "green";
}
}
</script>
最后,fn永远不会null,因为value文本字段的属性永远不会null; 它总是一个字符串.该字符串可能为空白.在这种情况下,最简单的测试也只是if (!fn) { /* missing */ } else { /* present */},这将考验fn,看它是否是null,undefined,0,"",false,或NaN(其中,那只能是"",因为又value始终是一个字符串).当然," "(一个空间)会超越它.