验证单选按钮

Question

我正在用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>

Answer 1

看起来像一个案例问题。 提交按钮的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]; 而不是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进行此操作时还有些生疏，因此可能会有很多改进，但是您明白了。

验证单选按钮

问题描述

1 个解决方案

解决方案1
1 已采纳 2010-08-28 00:13:55

验证单选按钮

问题描述

1 个解决方案

解决方案1 1 已采纳 2010-08-28 00:13:55

解决方案1
1 已采纳 2010-08-28 00:13:55