软件 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>
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 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>
此时的运行结果
本文地址：https://blog.csdn.net/BADReamer/article/details/109271917