javascript处置和验证表单
日期：2014-05-16 浏览次数：20417 次
javascript处理和验证表单
<HTML>
<HEAD>
<script language="javascript">
function load(){
//可以用下标也可以用id/name属性来获取表单元素
var firstName =document.forms["userForm"]["firstName"].value;
var lastName = document.forms[0].elements[1].value;
alert(firstName+" "+lastName);
//修改表单值
document.forms[0].elements[1].value="last";
//checkBox
//当提交form时，只会把checked属性为true的参数传递
var boxForm = document.forms["checkBox"];
alert(boxForm["box1"].checked);
boxForm["box2"].checked=true;
//radio
//同一组radio有相同的name属性，只能有一个checked的值为true
var radioForm = document.forms["radioForm"];
var radios = radioForm["place"];
for(var i=0;i<radios.length;i++){
var checkStatus = radios[i].checked;
alert(checkStatus);
}
//select
var selectForm = document.forms["selectForm"];
var sel = selectForm["sel"];
//sel.value和sel[sel.selectedIndex].value的值相等
//sel.selectedIndex被选中的options的索引
alert(sel.value);
alert(sel[sel.selectedIndex].value);
//绑定两个form的验证函数
document.forms["checkForm"].onsubmit = validForm;
document.forms["checkForm1"].onsubmit = validForm1;
}
//数字验证
function validForm(){
var checkForm = document.forms["checkForm"];
var age = checkForm["number"];
var ageVal = age.value;
alert(ageVal+" "+parseInt(ageVal));
//看表单value是否和parseInt的值相等，
//如果是float的话可以用parseFloat
if(ageVal == parseInt(ageVal)){
alert("success");
checkForm.submit;
return true;
}else{
age.focus();
alert("fail");
return false;
};
return true;
}
function validForm1(){
var els = document.forms["checkForm1"].elements;
for(var i=0;i<els.length;i++){
var el = els[i];
var val = el.value;
//获取自定义验证规则
var rules = el.getAttribute("test");
if("required" == rules){//非空验证
if(val == ""){
alert("null value");
return false;
}
}else if("length" == rules){//长度验证
if(val.length<6){
alert("too small");
return false;
}if(val.length>16){
alert("too long");
return false;
}
}
/*
可以自定义多个规则，也可以一个表单元素进行多个规则匹配
必要时最好用reg
*/
}
return true;
}
</script>
</HEAD>
<BODY onload="load()">
<form id="userForm">
First Name:<input type="text" name="firstName" value="firstName"/><br/>
Last Name:<input type="text" name="lastName" value="lastName"></br/>
</form><hr/>
<form id="checkBox">
<input type="checkbox" id="box1" value="1">北京
<input type="checkbox" id="box2" value="2">上海
<input type="checkbox" id="box3" value="3">广州
<input type="checkbox" id="box4" value="4">深圳
</form><hr/>
<form id="radioForm">
<input type="radio" name="place" value="1"/>北京
<input type="radio" name="place" />上海
<input type="radio" name="place" checked/>广州
<input type="radio" name="place" />深圳
</form>
<form id="selectForm">
<select type="select" id="sel" name="sel">
<option value="A">A</option>
<option value="B" selected>B</option>
<option value="C">C</option>
</select>
</form>
<form id="checkForm">
age:<input type="text" name="number" /><br/>
<input type="submit" >
</form>
<form id="checkForm1">
name:<input type="text" name="uname" test="required"/><br/>
password:<input type="password" name="psd" test="length" /><br/>
<input type="submit" >
</form>
</BODY>
</HTML>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
