JavaScript对表单的校验

1、Radio对象:

Radio 对象代表 HTML 表单中的单选按钮。

Radio 对象常用属性:

Radio 对象常用方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="按钮" onclick="t1()" />
		
		<br />
		<input type="radio" name="sex" value="0" />女
		<input type="radio" name="sex" value="1" />男
		<input type="button" value="单选" onclick="t3()" />
		<script>
			function t3(){
				//获取用户选中项的值
				var elements=document.getElementsByName("sex");
				for (var i=0;i<elements.length;i++) {
					var element=elements[i];
					console.log(element.checked+","+element.value);
				}
			}
			document.getElementsByName("sex")[1].checked=true;
			document.getElementsByName("sex")[0].checked=true;
	</body>
</html>

2、Checkbox 对象:

Checkbox 对象代表一个 HTML 表单中的 一个选择框。 Checkbox 对象常用属性:

Checkbox 对象常用方法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input id="name" />
		</script>
		
		<input type="checkbox" name="hobby" value="0" />篮球
		<input type="checkbox" name="hobby" value="0" />羽毛球
		<input type="checkbox" name="hobby" value="0" />乒乓球
		<input type="button" value="多选" onclick="t4()" />
		<script>
			function t4(){
				//获取用户选中项的值
				var elements=document.getElementsByName("hobby");
				for (var i=0;i<elements.length;i++) {
					var element=elements[i];
					console.log(element.checked+","+element.value);
				}
			}
			document.getElementsByName("hobby")[1].checked=true;
			document.getElementsByName("hobby")[0].checked=true;
		</script>
		
	</body>
</html>

3、Select 对象:

Select 对象代表 HTML 表单中的一个下拉列表。

Select 对象集合:

Select 对象常用属性:

4、Option 对象

Option 对象代表 HTML 表单中下拉列表中的一个选项。 Option 对象构造方法:

Option 对象常用属性:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<select id="province">
			<option value="">--请选择--</option>
			<option value="001">--辽宁省--</option>
			<option value="">--北京市--</option>
			<option value="">--上海市--</option>
		</select>
		<input type="button" value="下拉列表" onclick="t5()" />
		<script>
			function t4(){
				//获取用户选中项的值
				var elements=document.getElementsById("province");
				var options=element.options;
				for (var i=0;i<options.length;i++) {
					var option=options[i];
					console.log(option.selected+","+option.value);
				}
			}
			document.getElementsById("province").options[1].selected=true;
			document.getElementsById("province").disabled=true;
		</script>
	</body>
</html>

 

5、Form 对象:

Form 对象代表一个 HTML 表单。

Form 对象集合:

Form 对象常用属性:

Form 对象常用方法:

6、Text 对象:

Text 对象代表 HTML 表单中的文本输入域。

在 HTML 表单中 <input type="text"> 每出现一次,Text 对象就会被创建。

Text 对象常用属性:

Text 对象常用方法:

 

说明:Password 对象和Textarea 对象都有value属性、disabled属性和readOnly属性,都有focus方法;Hidden 对象有value属性、disabled属性,没有readOnly属性和focus方法;

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值