Javascript 表单验证[最多一个]
实例：有A,B,C,D四个输入框，但只要求只填一个。
可以随意选择一个填写。
//Javascript取得某class样式的DOM对象集合
function $(oClass)
{
var aClass=document.getElementsByTagName("*");
var oClassArr=[]; //定义空数组
for(var i=0;i<aClass.length;i++)
{
//检索每个DOM对象的className是否含有oclass类
if(aClass[i].className.toString().indexOf(oClass)!=-1)
{
oClassArr.push(aClass[i]); //添加到含有oclass的Dom集合
}
}
return oClassArr; //返回含有oclass类样式的所有对象
}
完整例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Tomi-Eric-表单验证—关于最多一个</title>
<style type="text/css">
.sText{ border:1px solid #666;}
.sText:hover{border:1px solid #f30; background:#FFFFCC}
p{ color:#555;}
p span{ display:block; width:5em; text-align:right; float:left; color:#666}
</style>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
function check_Form(obj)
{
if(obj.username.value=="")
{
alert("username为空");
obj.username.focus();
return false;
}
//检测区域的填写
//html5中可以用document.getElmentByClassName(".chcek")或getCheckText(oClass) 代替 $(".checkqy")
//if(check(getCheckText("check"))>1)
if(check($(".check"))>1)
{
alert("A,B,C,D只需填一项");
return false;
}
return true;
}
/*函数：检测区域的唯一性
**obj传入class为check的所有对象
**flags记录每个check不为空的个数
**返回不为空的check个数，当个数大于1时禁止提交表单
*/
function check(obj){
var flags=0;
for(var i=0;i<obj.length;i++){
if(obj[i].value!="")
{
flags+=1;
}
}
return flags;
}
//获得class对象集合数组
function getCheckText(oClass){
var sText=document.getElementsByTagName("input");
var checkText=[];//动态数组
for(var i=0;i<sText.length;i++)
{
if(sText[i].className.toString().indexOf(oClass)!=-1)
{
// checkText.push(sText[i]);
checkText.push(this);
}
}
return checkText;
}
</script>
</head>
<body>
<fieldset>
<p><span> </span>A,B,C,D只需填一项</p>
<form action="#" method="post" onSubmit="return check_Form(this)">
<p>
<span>A:</span><input type="text" class="sText check" />
</p>
<p>
<span>B:</span><input type="text" class="sText check" />
</p>
<p>
<span>C:</span><input type="text" class="sText check" />
</p>
<p>
<span>D:</span><input type="text" class="sText check" />
</p>
<p>
<span>username:</span><input type="text" class="sText" name="username" />
</p>
<p><span> </span><input type="submit" value="submit" /> <input type="reset" value="reset" /> <input type="button" value="click" onclick="getCheckText('check')" />
</p>
</form>
</fieldset>
</body>
</html>
- 上一篇 »html之novalidate
- 下一篇 »javascript表单验证常用正则