javascript处理和验证表单-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_7664/article/details/81955517

本文介绍了如何使用JavaScript操作HTML表单元素，包括文本输入、复选框、单选按钮和下拉选择框等，并实现了基本的表单验证功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<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>