JS(DOM对象表单验证与正则表达)

最新推荐文章于 2024-06-09 20:17:27 发布

outlier--

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量305

点赞数

分类专栏：前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/yizhishuangsheng/article/details/123012667

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM对象

表单验证

DOM对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		   js是面向对象的语言
		   操作网页本质就是操作标签
		   js中,每个标签就是一个对象
		   DOM对象就是对这一类对象的统称
		    要操作标签,先得到这个对象
			id名得到,标签名得到,类名得到,name得到(表单中name)
			window.document
			document.getElementById();通过id找到唯一的标签
			         getElementsByTagName();通过标签名获取
					 getElementsByClassName();通过class属性名获取
					 getElementsByName();通过标签name属性名获取
				后三中获取到的都是一个集合对象(数组)
				即使获取到的只有一个标签对象 也是一个集合
		js操作标签
		  操作标签属性
		  操作标签内容
		  操作标签中的css
			
			
		 -->
		 <script type="text/javascript">
		 	// document.getElementById("")
			function test(){
				//获得文本框一的值
				var tob1=document.getElementById("tid1");//获得文本框标签对象
				// console.log(obj1.value);
				var tobj2=document.getElementById("tid2");
				tobj2.value=tobj1.value;
				tobj1.value="";
				
				
			}
			function changeBgcolor(color){
				var bobj=document.getElementById("bgcolor");
				bobj.bgColor=color;
			}
		 </script>
	</head>
	<body id="bgcolor">
		<input type="text" id="tid1" value="" />
		<input type="text"  id="tid2" value=""/>
		<input type="button" value="测试按钮" onclick="test()" />
		<input type="button" value="红色" onclick="changeBgcolor('red')"/>
		<input type="button" value="绿色" onclick="changeBgcolor('green')"/>
		<input type="button" value="蓝色" onclick="changeBgcolor('blue')"/>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function test(){
				var dobj1=document.getElementById("div1");
				var dobj2=document.getElementById("div2");
				dobj2.innerHTML=dobj1.innerHTML;
				// 操作css
				dobj1.style.width="200px";
				dobj1.style.height="200px";
				dobj1.style.background="green";
			}
		</script>
	</head>
	<body>
		<!-- //修改标签体内容 -->
		<div id="div1">第一个div</div>
		<div id="div2"></div>
		<input type="button" value="测试按钮" onclick="test()" />
	</body>
</html>

表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function subform(){
				/* 
				   正则表达式
				   var reg=new RegExp("a");
				     reg.test(account);
			        
				   var res=/^\d*$/  0次或多次数字 加号是一次或多次
				           /^1[3578]\d{9}$/ 1开头 第二位3578 再来九位数字
						   \w     [0到9 a到z A到Z _ 包括下划线]
				   
				   
				
				 */
				//验证条件
				var accobj=document.getElementById("accountid");
				var account=accobj.value;
				if(account.length==0){
					document.getElementById("msg").innerHTML="账号不能为空";
					return;
				}else{
					document.getElementById("msg").innerHTML="√";
				}
				document.getElementById("formID").submit();//js中获得并提交表单
			}
		</script>
	</head>
	<body>
		<!-- 
		   前端对表单进行验证 减少后端工作量
		 -->
		 <form action="server.html" method="get" id="formID">
			 账号<input type="text" id="accountid"/><br /> 
			 <span id="msg"></span><br />
			 密码<input type="password" id="passwordid"/><br />
			     <input type="button" value="保存" onclick="subform()"/>
		 </form>
	</body>
</html>

outlier--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS(DOM对象表单验证与正则表达)

目录DOM对象表单验证DOM对象<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <!-- js是面向对象的语言操作网页本质就是操作标签 js中,每个标签就是一个对象 DOM对象就是对这一类对象的统称要操作标签,先得到这个对象 id名得到,标
复制链接

扫一扫