表单校验对象总结

最新推荐文章于 2022-12-16 10:43:50 发布

中国GZ

最新推荐文章于 2022-12-16 10:43:50 发布

阅读量531

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Gong_Zheng6/article/details/107427063

版权

1.form对象：

Form 对象代表一个 HTML 表单。

Form 对象集合：

集合	描述
elements[]	包含表单中所有元素的数组。

Form 对象常用属性：

属性	描述
action	设置或返回表单的 action 属性。
enctype	设置或返回表单用来编码内容的 MIME 类型。
length	返回表单中的元素数目。
method	设置或返回将数据发送到服务器的 HTTP 方法。

Form 对象常用方法：

方法	描述
reset()	把表单的所有输入元素重置为它们的默认值。例子
submit()	提交表单。例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
               <form action="" id="test">
			<input  />
			<input type="button" onclick="t7()" value="提交"/>
		</form>
            <script>
                    function t7(){
				var element = document.getElementById("test");//获取form对象
				element.submit();//提交表单
			}
            </script>
	</body>
</html>

2.text对象：

Text 对象代表 HTML 表单中的文本输入域。在 HTML 表单中 <input type="text"> 每出现一次，Text 对象就会被创建。

Text 对象常用属性：

属性	描述
defaultValue	设置或返回文本域的默认值。
disabled	设置或返回文本域是否应被禁用。
maxLength	设置或返回文本域中的最大字符数。
readOnly	设置或返回文本域是否应是只读的。
size	设置或返回文本域的尺寸。
type	返回文本域的表单元素类型。
value	设置或返回文本域的 value 属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
            <form>
			<input type="text" id="name" />
                        <input type="password" id="password"/>//属性与text相同
                        <textarea id="ta"></textarea>//属性与text相同
                        <input type="button" value="测试" onclick="t1()"/>
            </form>
            <script>
                        document.getElementById("name").focus();//设置text对象焦点
			function t1(){
				var element = document.getElementById("name");//获取text对象
				console.log(element.value);//获取text对象值
				element.value = "Jimmy";//重新赋值
				element.readOnly = true;//设置只读
				element.disabled = true;//设置禁用
			}
            </script>
	</body>
</html>

3.radio对象：

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

Radio 对象常用属性：

属性	描述
checked	设置或返回单选按钮的状态。
defaultChecked	返回单选按钮的默认状态。
disabled	设置或返回是否禁用单选按钮。
type	返回单选按钮的表单类型。
value	设置或返回单选按钮的 value 属性的值。

Radio 对象常用方法：

方法	描述
blur()	从单选按钮移开焦点。
click()	在单选按钮上模拟一次鼠标点击。
focus()	为单选按钮赋予焦点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
            <form>
			input type="radio" name="sex" value="0" />男
			<input type="radio" name="sex" value="1" />女
                        <input type="button" value="测试" onclick="t4()"/>
            </form>
            <script>
			function t4(){
				var elements = document.getElementsByName("sex");//获取对象数组
				elements[0].checked=true;//设置“男”为已选
				for(var i=0;i<elements.length;i++){//输出所有已选项的值
					if(elements[i].checked){
						console.log(elements[i].value);
						
					}
				}
				elements[1].disabled=true;//设置“女”选项为禁用
				
			}
            </script>
	</body>
</html>

4.checkbox对象常用属性方法与radio相同

5.Select 对象：

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

Select 对象集合：

集合	描述
options[]	返回包含下拉列表中的所有选项的一个数组。

Select 对象常用属性：

属性	描述
disabled	设置或返回是否应禁用下拉列表。
length	返回下拉列表中的选项数目。
multiple	设置或返回是否选择多个项目。
selectedIndex	设置或返回下拉列表中被选项目的索引号。
size	设置或返回下拉列表中的可见行数。
type	返回下拉列表的表单类型。

Select 对象常用方法：

方法	描述
add()	向下拉列表添加一个选项。
blur()	从下拉列表移开焦点。
focus()	在下拉列表上设置焦点。
remove(index)	从下拉列表中删除一个选项。
add()	向下拉列表添加一个选项。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
            <form>
			<select id="province">
				<option value="">---请选择---</option>
				<option value="北京市">北京市</option>
				<option value="河南省">河南省</option>
				<option value="安徽省">安徽省</option>
			</select>
                        <input type="button" value="测试" onclick="t6()"/>
            </form>
            <script>
			function t6(){
				var element = document.getElementById("province");//获取select对象
				var options = element.options;//将select对象元素存进数组中
				options[2].selected=true;//设置河南省为已选
				for(var i=0;i<options.length;i++){//输出所有已选项的值（河南省）
					if(options[i].selected){
						console.log(options[i].value);
					}
				}
				element.disabled=true;//设置select下拉列表禁用，注意这里是element
			}
            </script>
	</body>
</html>

中国GZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单校验对象总结

1.form对象：Form 对象代表一个 HTML 表单。Form 对象集合：集合描述 elements[] 包含表单中所有元素的数组。 Form 对象常用属性：属性描述 action 设置或返回表单的 action 属性。 enctype 设置或返回表单用来编码内容的 MIME 类型。
复制链接

扫一扫