验证单选按钮

我使用php处理表单，我也想在客户端添加验证。我阅读about.com有关使用javascript验证单选按钮的教程，并根据其指导原则设置此示例。验证单选按钮

a）为什么不显示警报消息？

b）我如何将警报消息替换为一些innerHtml文本？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html><head> 

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>validateradio</title> 


<script type="text/javascript"> 


function valButton(btn) { 
    var cnt = -1; 
    for (var i=btn.length-1; i > -1; i--) { 
     if (btn[i].checked) {cnt = i; i = -1;} 
    } 
    if (cnt > -1) return btn[cnt].value; 
    else   return null; 

} 




function valButton2(form){ 

var btn=valButton(form.group1); 
if (btn==null){alert('no radio button selected');} 
else alert('button value' + btn + 'selected'); 


} 


</script> 


</head> 


<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" alink="#000088" link="#0000ff" vlink="#ff0000"><br> 

<form name="myform"> 


<label for="r1"><input type="radio" 
name="group1" id="r1" value="1" /> button one</label> 

<label for="r2"><input type="radio" 
name="group1" id="r2" value="2" /> button two</label> 

<label for="r3"><input type="radio" 
name="group1" id="r3" value="3" /> button three</label> 


<input type="submit" name="submitit" onclick="valbutton2(myform);" value="Validate" /> 



</form> 



</body></html>

来源

2010-08-27 andandandand

看起来像个案问题。您的提交按钮的onclick处理程序是valbutton2(myform);，但您尝试调用的函数的名称实际上是valButton2。

关于获取innerHTML，不使用框架，它可能有点丑。一种解决方案将是一个ID添加到包含相应的单选按钮的ID标签：

<label for="r1" id="lbl-r1"><input type="radio" name="group1" id="r1" value="1" /> button one</label>

然后从你的第二个函数返回到选定的单选按钮的引用，而不是它的价值return btn[cnt];而不是return btn[cnt].value;的。然后，你可以使用类似下面的访问标签文本：

var id = btn.getAttribute("id"); 
var lbl = document.getElementById("lbl-" + id); 
for (var i = 0; i < lbl.childNodes.length; i++) { 
    var n = lbl.childNodes[i]; 
    if (n.nodeType == 3) { 
     alert(n.nodeValue); 
    } 
}

我一直在使用jQuery和其他框架了这么久，现在我比在平直的JavaScript这样做有点生疏多，所以这可能可以改善很多，但你明白了。

来源

2010-08-28 00:13:55 Bryan

谢谢，这解决了我的第一个问题。 – andandandand 2010-08-28 00:21:30

顺便说一句，你用编辑器来捕捉？我正在研究Ubuntu的gedit，并希望能够帮助您发现语法问题。 – andandandand 2010-08-28 00:23:18

查看我的更新以获取文本的可能方式。我没有使用编辑器，只是通过查找来捕捉它。 – Bryan 2010-08-28 00:43:49

验证单选按钮

回答

相关问题