初学JavaScript第六天

最新推荐文章于 2024-07-23 21:47:37 发布

এ᭄༊空旧黎梦ღꦿ࿐

最新推荐文章于 2024-07-23 21:47:37 发布

阅读量277

点赞数

文章标签：正则表达式

本文链接：https://blog.csdn.net/weixin_70675726/article/details/127037993

版权

正则表达式

更多详情请看正则表达式 – 元字符 | 菜鸟教程

例如

编写注册页面，使用正则表达式完成相关验证，可以使用alert弹出。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.num{
				margin-left: 20px;
			}
			.su{
				width: 250px;
				margin-top: 5%;
				margin-left: 42%;
			}
		</style>
	</head>
	<body>
		<div class="su">
			<h3 style="margin-left:45px;">欢迎注册**网站</h3>
			<h4>姓名:<input type="text" id="a" placeholder="2-4个中文" class="num"/></h4>
			 <h4>密码:<input type="text" id="b" placeholder="至少6个数字必须是字母数字下划线" class="num"/></h4>
			<h4>邮箱:<input type="text" id="c" placeholder="单域名邮箱" class="num"/></h4>
			<h4>年龄:<input type="text" id="d" placeholder="整数" class="num"/></h4>
			<input type="button" id="e" value="验证信息" style="margin-left:75px;"/>
		</div>
		
  		<script type="text/javascript">
  			document.getElementById("e").onclick=function(){
  				var zhon=/^[\u4e00-\u9fa5]+$/
  				var a1=document.getElementById("a").value
  				var isa1=zhon.test(a1)
  				if(isa1==false){
  					alert("名字格式不正确")
  					return
  				}
  				var mm=/^[0-9a-zA-Z_]{6,}$/
  				var mm1=document.getElementById("b").value
  				var mm2=mm.test(mm1)
  				if(mm2==false){
  					alert("密码格式不正确")
  					return
  				}
  				var you=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
  				var you1=document.getElementById("c").value
  				var you2=you.test(you1)
  			
  				if(you2==false){
  					alert("邮箱格式不正确")
  					return
  				}
  				var zheng=/^[0-9]*$/
  				var zheng1=document.getElementById("d").value
  				var zheng2=zheng.test(zheng1)
  				if(zheng2==false){
  					alert("年龄格式不正确")
  					return
  				}
  				if(isa1&&mm2&&you&&zheng2){
  					alert("验证成功")
  				}
  			}
  		</script>
	</body>
</html>

判断式

特别注意邮箱判断表达式

存储插入内容

表达式

getElementsByTagName 获取ul标签

createElement("li") 创建li标签

lastElementChild 获取最后一个标签

例如

有一个数组里面存储了五个学生的姓名，请使用js将这五名学生的姓名以列表的形式显示在页面中。根据指定的内容添加、删除、修改列表中的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	        ul{
	            width: 300px;
	            list-style: none;
	        }
	        ul li{
	            border: 1px solid red;
	            padding: 10px 20px;
	            margin-bottom: 5px;
	        }
	    </style>
	</head>
	<body>
		<input type="text" name="txt" id="txt" value="" />
		<input type="button" value="添加节点" onclick="add()">&nbsp;
	    <input type="button" value="删除节点" onclick="del()">&nbsp;
	    <input type="button" value="修改节点" onclick="update()">
	    <ul>
	        <li>向江南折过花</li>
	        <li>对春风与红蜡</li>
	        <li>多情总似我风流爱天下</li>
	        <li>人世肯相逢知己幸有七八</li>
	        <li>邀我拍坛去醉眼万斗烟霞</li>
	    </ul>
	    <script type="text/javascript">
	    	var ul=document.getElementsByTagName("ul")[0]
	    	function add(){
	    		var li=document.createElement("li")
	    		li.innerHTML=document.getElementById("txt").value
	    		ul.appendChild(li)
	    	}
	    	
	    	function del(){
	    		var li=ul.lastElementChild
	    		ul.removeChild(li)
	    	}
	    </script>
	</body>
</html>