javascript中的单选按钮验证
Posted
技术标签:
【中文标题】javascript中的单选按钮验证【英文标题】：Radio button validation in javascript 【发布时间】：2012-05-07 12:28:00 【问题描述】：需要验证单选按钮输入，即当按下提交按钮并且没有选择单选按钮时，它会提醒用户说“请选择一个复选框”，如果已选择单选按钮，则只需提交表单，不需要提醒。
为此只能使用 html CSS 和 javascript，我知道它在 jquery 中要容易 1000 倍，但遗憾的是我不能使用它。
而且我知道我的 HTML 无效，但除非它直接影响到我当前的问题，否则我会稍后处理。
<form name="form1" action="#" onsubmit="return validateForm()" method="post">
First time visitor?:<br/>
<label for="s1">Yes</label>
<input type="radio" id="1" name="yesno" value="1"/>
<br/>
<label for="s2">No</label>
<input type="radio" id="1" name="yesno" value="2"/>
<br/>
<input type="submit" value="Submit"><br/>
</form>
非常感谢任何指针，谢谢。
【问题讨论】：
您删除了您的问题以重新制作相同的问题，因为另一个问题的 cmets 为负数？顺便说一句，无效标记（如重复 ID）确实直接影响您当前的问题。 注意：ids不应该以数字开头 @benji 请发布您的 validateForm 函数。 【参考方案1】：第一：如果你知道你的代码不正确，你应该在做任何事情之前修复它！
你可以这样做：
function validateForm()
var radios = document.getElementsByName("yesno");
var formValid = false;
var i = 0;
while (!formValid && i < radios.length)
if (radios[i].checked) formValid = true;
i++;
if (!formValid) alert("Must check some option!");
return formValid;
查看实际操作：http://jsfiddle.net/FhgQS/
【讨论】：
该脚本应该适用于超过 2 个单选按钮，不是吗？我正在使用您的代码，但我收到一个错误，即 validateForm() 未定义？您认为是什么原因造成的？ 我发现了问题所在。我从 jsFiddle 复制了它并添加了导致我的代码出错的隐藏字符。这是包含更多详细信息的页面***.com/questions/4404526/… 我会将行 if (radios[i].checked) formValid = true; 更改为 if (radios[i].checked) formValid = radios [i].值； 所以它变成了选中项的值。这样您就可以知道检查了哪个项目。此外，即使只有一项，也要始终使用大括号。【参考方案2】：使用 javascript 的完整验证示例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio button: full validation example with javascript</title>
<script>
function send()
var genders = document.getElementsByName("gender");
if (genders[0].checked == true)
alert("Your gender is male");
else if (genders[1].checked == true)
alert("Your gender is female");
else
// no checked
var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
document.getElementById('msg').innerHTML = msg;
return false;
return true;
function reset_msg()
document.getElementById('msg').innerHTML = '';
</script>
</head>
<body>
<form action="" method="POST">
<label>Gender:</label>
<br />
<input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
<br />
<input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
<br />
<div id="msg"></div>
<input type="submit" value="send>>" onclick="return send();" />
</form>
</body>
</html>
问候，
费尔南多
【讨论】：
【参考方案3】：你可以这样做
var option=document.getElementsByName('yesno');
if (!(option[0].checked || option[1].checked))
alert("Please Select Your Gender");
return false;
【讨论】：
【参考方案4】：<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data">
<div class="text-input">
<label>Gender: </label>
<input class="form-control" type="radio" name="gender" id="male" value="male" />
<label for="male">Male</label>
<input class="form-control" type="radio" name="gender" id="female" value="female" />
<label for="female">Female</label>
</div>
<div class="text-input" align="center">
<input type="submit" name="register" value="Submit" onclick="return radioValidation();" />
</div>
</form>
<script type="text/javascript">
function radioValidation()
var gender = document.getElementsByName('gender');
var genValue = false;
for(var i=0; i<gender.length;i++)
if(gender[i].checked == true)
genValue = true;
if(!genValue)
alert("Please Choose the gender");
return false;
</script>
来源：http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html
【讨论】：
【参考方案5】：document.forms[ 'forms1' ].onsubmit = function()
return [].some.call( this.elements, function( el )
return el.type === 'radio' ? el.checked : false
)
只是我脑子里想的东西。不确定代码是否正常工作。
【讨论】：
【参考方案6】：除了上述 Javascript 解决方案之外，您还可以通过在标记中根据需要标记单选按钮来使用 HTML 5 解决方案。这将消除对任何 Javascript 的需求，让浏览器为您完成工作。
请参阅HTML5: How to use the "required" attribute with a "radio" input field，了解如何做好这项工作的更多信息。
【讨论】：
以上是关于javascript中的单选按钮验证的主要内容，如果未能解决你的问题，请参考以下文章