Javascript 在本例中添加表单验证_Javascript

Javascript 在本例中添加表单验证

javascript

Javascript 在本例中添加表单验证,javascript,Javascript,我有三组单选按钮和一组复选框。如何检查是否在每组单选按钮中选择了单选按钮，并且至少选中了一个复选框？如果没有，可能会弹出一个警报窗口。因此：需要从所有三个组中选择一个单选按钮和一个复选框（所有四个都是必需的）。我在这方面运气不好。谢谢 <html> <head> <script type="text/javascript"> function DisplayFormValues() { var str = ''; var elem = docu

我有三组单选按钮和一组复选框。如何检查是否在每组单选按钮中选择了单选按钮，并且至少选中了一个复选框？如果没有，可能会弹出一个警报窗口。因此：需要从所有三个组中选择一个单选按钮和一个复选框（所有四个都是必需的）。我在这方面运气不好。谢谢

<html> 
<head> 
<script type="text/javascript"> 
function DisplayFormValues() 
{ 
var str = ''; 
var elem = document.getElementById('frmMain').elements; 


for(var i = 0; i < elem.length; i++) 
{
if(elem[i].checked)
{
str += elem[i].value+"<br>";
}
} 

document.getElementById('lblValues').innerHTML = str; 
document.frmMain.reset();
} 

</script> 
</head> 
<body> 

<form id="frmMain" name="frmMain"> 
Set 1
<INPUT TYPE="radio" NAME="r1" value="r1a">
<INPUT TYPE="radio" NAME="r1" value="r1b">
<INPUT TYPE="radio" NAME="r1" value="r1c">
<br>
Set 2
<INPUT TYPE="radio" NAME="r2" value="r2a">
<INPUT TYPE="radio" NAME="r2" value="r2b">
<INPUT TYPE="radio" NAME="r2" value="r2c">
<br>
Set 3
<INPUT TYPE="radio" NAME="r3" value="r3a">
<INPUT TYPE="radio" NAME="r3" value="r3b">
<INPUT TYPE="radio" NAME="r3" value="r3c">
<br>
Check 1
<INPUT TYPE="checkbox" NAME="c1" value="c1a">
<INPUT TYPE="checkbox" NAME="c1" value="c1b">
<INPUT TYPE="checkbox" NAME="c1" value="c1c">

<input type="button" value="Test" onclick="DisplayFormValues();" /> 
</form> 
<hr /> 
<div id="lblValues"></div> 

</body> 
</html>


函数DisplayFormValues（）
{ 
var-str=''；
var elem=document.getElementById（'frmMain'）.elements；
对于（变量i=0；i”；
}
} 
document.getElementById（'lblValues'）。innerHTML=str；
document.frmMain.reset（）；
} 
第1组


第2组


第三组


检查1

您可以通过编写大量代码在javascript中实现这一点，或者我强烈建议使用jquery验证插件。看看这个例子：

您可以执行以下操作：

<input type="radio" validate="required:true" name="family" value="s" id="family_single" class="error">

这将要求至少选择一个选项

此外，当某些内容无效时，最好有内联反馈。发出警报真的很烦人

var radioCount=0；
var radioCount = 0;
var checkBoxCount = 0;
var currentElement;

for (var i = 0; i < elem.length; ++i) {
  currentElement = elem[i];

  if (!currentElement.checked)
    continue;
  if (currentElement.type == "checkbox")
    ++checkBoxCount;
  else if (currentElement.type == "radio")
    ++radioCount;
}

if (radioCount < 3)
  //fail

if (checkBoxCount < 1)
  //fail

var checkBoxCount=0；
无功电流元件；
对于（变量i=0；i

以下是您的函数的修改版本：

function DisplayFormValues() { 
    var str = ''; 
    var elem = document.getElementById('frmMain').elements; 
    var groups = { 'r1': 0, 'r2': 0, 'r3':0, 'c1': 0 };

    for (var i = 0; i < elem.length; i++){
        if (elem[i].checked) {
            var n = elem[i].name;
            groups[n] += 1
            str += elem[i].value + "<br>";
        }
    } 

    document.getElementById('lblValues').innerHTML = groups['r1'] + "/" + 
        groups['r2'] + "/" + groups['r3'] + "/" + groups['c1']; 
    document.frmMain.reset();
}

函数DisplayFormValues（）{
var-str=''；
var elem=document.getElementById（'frmMain'）.elements；
变量组={'r1'：0，'r2'：0，'r3'：0，'c1'：0}；
对于（变量i=0；i”；
}
} 
document.getElementById（'lblValues'）。innerHTML=groups['r1']+“/”+
组['r2']+“/”+组['r3']+“/”+组['c1']；
document.frmMain.reset（）；
}

在这个函数中，我们计算检查了多少个元素（显然，同一组中的单选按钮有一个元素，但您了解其原理，这是灵活的），并且

groups[XXX]

是计数（其中

XXX

是组名）。您可以根据需要进行调整，并根据要求添加警报