html frameset框架+简易注册页面(用js验证手机号用户名密码)

最新推荐文章于 2023-04-11 18:39:55 发布

BADReamer

最新推荐文章于 2023-04-11 18:39:55 发布

阅读量516

点赞数 1

分类专栏： JAVA WEB

本文链接：https://blog.csdn.net/BADReamer/article/details/109271917

版权

JAVA WEB 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

软件 eclipse
在这里插入图片描述
index.html

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8" />
		<title>2077</title>
	</head>
 
	<frameset rows="15%,*,15%" border="3" framespacing="1">
		
		<frame src="top.html" name="fa">
			
			<frameset cols="25%,*">
				
				<frame src="left.html" name="fb" />
				
				<frame src="right.html" name="fc" />
				
		
 
</html>

left.html

<body>
		<h1>燃烧我的</h1>
		
			<a href="fright.html" target="fc">主页</a><br/>
		  	<a href="Register.html" target="fc">注册</a><br/>
			<a href="http://www.baidu.com" target="fc">百度</a><br />
			<a href="https://www.glut.edu.cn/" target="view_frame">桂林理工大学</a><br />
			<a href="https://s.weibo.com/top/summary" target="fc">微博热搜</a><br />
			<a href="https://www.bilibili.com/" target="fc">哔哩哔哩</a><br/>
		
			<a href="javascript:history.back()">返回</a><br />
	

	</body>

right.html

<body>

		<h1>卡路里！?</h1>
	</body>

top.html

<body>
		<center>
		<h1>Welcome!!!</h1>
		</center>
	</body>

fright.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
                <h1>卡路里！</h1>
    </body> 
</html>

<html>
  <head>
  <meta charset = 'UTF-8'>
    <title></title>
    
	<style>

	   .t1 {
            width: 100px;
            height: 45px;
            text-align: right;
        }
        .t2 {
            padding-left: 50px ;
        }
	</style>
 
    
    <script type="text/javascript" language = "javascript">
    function check(){
    	// 校验手机号
    	var number = document.getElementById("tel").value;
    	if(number == ""){
			alert("手机号不能为空");
			return false;
			}
    	if(!(/^1[3456789]\d{9}$/.test(number))){	
			alert("手机号的格式不对");
			return false;
			}
   
    
    
    //验用户名
  
    	var username = document.getElementById("username").value;
    	if(username == ""){
			alert("用户名不能为空");
			return false;
			}
     	if(!(/^\w{6,12}$/.test(username))){	
			alert("用户名为6-12位");
			return false;
			}
    
    
    //验密码
    
    
        var pwd1 = document.getElementById("pwd1").value;
        var pwd2 = document.getElementById("pwd2").value;
		
        if(pwd1 == ""){
			alert("密码不能为空");
			return false;
			}
       
		
		if(pwd1 != pwd2){
			alert("两次输入的密码不一样，请重新输入");
			return false;
			}
      
    
    }
    
    
   
	</script>
	
  </head>
  
  
  
  <body>
    <h1>注册页面 </h1>
   

   <table> <!-- 定义一个表格 -->       
          <tr>
               <td class="td1"><label for="tel">手机号</label></td>
                <td class="td2"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>           
            </tr>
            
            <tr>
                <td class="td1"><label for="username">用户名</label></td>                 
                <td class="td2"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>         
            </tr>     
                    
              <tr>         
                <td class="td1"><label for="password">密码</label></td>
                <td class="td2"><input type="password" name="password" id="pwd1" placeholder="请输入密码"></td>
            </tr>
            
             <tr>         
                <td class="td1"><label for="password">重复输入密码</label></td>
                <td class="td2"><input type="password" name="password" id="pwd2" placeholder="请再输入密码"></td>
            </tr>
            
    	</table>
    	
    	 <button onclick="check()" class="btn btn-info">注册</button>
    </form>
  </body>
</html>

运行index.html
在这里插入图片描述

若js函数分开写
Register.html

<html>
  <head>
  <meta charset = 'UTF-8'>
    <title></title>
    
	<style>

	   .t1 {
            width: 100px;
            height: 45px;
            text-align: right;
        }
        .t2 {
            padding-left: 50px ;
        }
	</style>
 
    
    <script type="text/javascript" language = "javascript">
  
    
    function check1(){
    	// 校验手机号
    	var number = document.getElementById("tel").value;
    	if(number == ""){
			alert("手机号不能为空");
			return false;
			}
    	if(!(/^1[3456789]\d{9}$/.test(number))){	
			alert("手机号的格式不对");
			return false;
			}
   
    }
    function check2(){
    //验用户名
  
    	var username = document.getElementById("username").value;
    	if(username == ""){
			alert("用户名不能为空");
			return false;
			}
     	if(!(/^\w{6,12}$/.test(username))){	
			alert("用户名为6-12位");
			return false;
			}
    
    }
    
    function check3(){
    //验密码
    
    
        var pwd1 = document.getElementById("pwd1").value;
        var pwd2 = document.getElementById("pwd2").value;
		
        if(pwd1 == ""){
			alert("密码不能为空");
			return false;
			}
       
		
		if(pwd1 != pwd2){
			alert("两次输入的密码不一样，请重新输入");
			return false;
			}
      
    
    }
    
    
   
	</script>
	
  </head>
  
  
  
  <body>
    <h1>注册页面 </h1>
   
 
 
   <table> <!-- 定义一个表格 -->       
   <tr>
               <td class="td1"><label for="tel">手机号</label></td>
                <td class="td2"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>           
            </tr>
            <tr>
                <td class="td1"><label for="username">用户名</label></td>                 
                <td class="td2"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
          
            </tr>             
              <tr>         
                <td class="td1"><label for="password">密码</label></td>
                <td class="td2"><input type="password" name="password" id="pwd1" placeholder="请输入密码"></td>
            </tr>
             <tr>         
                <td class="td1"><label for="password">重复输入密码</label></td>
                <td class="td2"><input type="password" name="password" id="pwd2" placeholder="请再输入密码"></td>
            </tr>
    	</table>
    	
    	 <button onclick="check1();check2();check3()" class="btn btn-info">注册</button>
    </form>
  </body>
</html>

其中js部分

<script type="text/javascript" language = "javascript">


function check1(){
	// 校验手机号
	var number = document.getElementById("tel").value;
	if(number == ""){
		alert("手机号不能为空");
		return false;
		}
	if(!(/^1[3456789]\d{9}$/.test(number))){	
		alert("手机号的格式不对");
		return false;
		}

}
function check2(){
//验用户名

	var username = document.getElementById("username").value;
	if(username == ""){
		alert("用户名不能为空");
		return false;
		}
 	if(!(/^\w{6,12}$/.test(username))){	
		alert("用户名为6-12位");
		return false;
		}

}

function check3(){
//验密码


    var pwd1 = document.getElementById("pwd1").value;
    var pwd2 = document.getElementById("pwd2").value;
	
    if(pwd1 == ""){
		alert("密码不能为空");
		return false;
		}
   
	
	if(pwd1 != pwd2){
		alert("两次输入的密码不一样，请重新输入");
		return false;
		}
  

}


</script>

body里 <button onclick="check1();check2();check3()" class="btn btn-info">注册</button>

此时的运行结果
在这里插入图片描述

BADReamer

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html frameset框架+简易注册页面(用js验证手机号用户名密码)

软件 eclipseindex.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>2077</title> </head> <frameset rows="15%,*,15%" border="3" framespacing="1"> <frame src="top.html" name=
复制链接

扫一扫