2021-04-28

最新推荐文章于 2024-07-21 19:13:42 发布

风雨之都之天下霸主

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量59

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_46197017/article/details/116241907

版权

HTML部分

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="Pragma" content="no-cache">
	<meta http-equiv="Cache-Control" content="no-cache">
	<meta http-equiv="Expires" content="0">
	<title>用户注册</title>
	<link rel="stylesheet" href="2019110350.css">
</head>
<body>
	<div class="login_box">
		<div class="title">
			<h1>用户注册</h1>
		</div>
		<form class="login_form" id="login_form" name="login_form" action='index.html' onsubmit="return checkform()">
			<!-- 此处开始答题  -->
			<table>
				<tr>
					<td>
						<label for="username">
							<span>*</span>
							用户名：
						</label>
					</td>
					<td>
						<input type="text" placeholder="2019110350" class="ipt" id="username"/>
					</td>
				</tr>
				<tr>
					<td>
						<label for="password">
							<span>*</span>
							密码：
						</label>
					</td>
					<td>
						<input type="password" placeholder="密码" class="ipt" id="password1"/>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							<span>*</span>
							确认密码：
						</label>
					</td>
					<td>
						<input type="password" placeholder="确认密码" class="ipt" id="password2"/>
					</td>
				</tr>
				<tr>
					<td>
						<label for="birthday">
							<span>*</span>
							生日：
						</label>
					</td>
					<td>
						<input type="date" placeholder="yyyy-mm-日" class="ipt" id="birthday"/>
					</td>
				</tr>
				<tr>
					<td>
						<label>
							<span>*</span>
							爱好：
						</label>
					</td>
					<td>
						<input type="checkbox" class="interting"/>运动
						<input type="checkbox" class="interting"/>阅读
						<input type="checkbox" class="interting"/>音乐
					</td>
				</tr>
				<tr>
					<td colspan="2" id="but">
						<input type="button" value="注册" id="btn"/>
					</td>
				</tr>
			</table>
			

			<!-- 此处结束答题  -->
		</form>
	</div>
	<!-- <link href="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.css" rel="stylesheet">
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script> -->
	<link href="./static/jquery.toast.css" rel="stylesheet">
	<script src="./static/jquery.min.js"></script>
	<script src="./static/jquery.toast.min.js"></script>
	<script src="2019110350.js"></script>
</body>
</html>

CSS部分

@charset "utf-8";
* { 
  -webkit-box-sizing: border-box; /* Safari, Chrome */
  -moz-box-sizing: border-box;  /*Firefox  */
  box-sizing: border-box; 
  padding:0; 
  margin:0; 
}

html,
body {
  height: 100%;  
  width: 100%;
  background-color:#2b4b6b;
	padding: 0px;
	margin: 0px;
}

/* 此处开始答题 */

.login_box{
	margin: auto;
	width: 450px;
	/* height: 425px; */
	background-color: white;
	border-radius: 10px;
}

.title{
	height: 60px;
	text-align: center;
	margin-top: 20px;
	color: #2B4B6B;
	width: auto;
}

.login_form{
	width: auto;
	padding: 1.25rem;
	
}

.login_form > td > label{
	text-align: right;
}

#btn{
	text-align: center;
	margin: auto;
	width: 30%;
	height: 40px;
	font-size: 16px;
	background-color: #27A9E3;
	color: #fff;
	border: 0px;
	margin: 0px;
}

#but{
	text-align: center;
}

tr{
	margin: auto;
	padding-top: 15px;
	padding-bottom: 15px;
	height: 40px;
}

label{
	width: 120px;
	height: 40px;
	margin-top: 15px;
	margin-bottom: 15px;
	float: right;
	text-align: right;
}
span{
	color: red;
	font-size: 20px;
	margin-right: 5px;
}

.ipt{
	width: 200px;
	height: 40px;
	border-radius: 4px;
	border: 1px #DCDEE0;
	padding-left: 16px;
	padding-right: 16px;
	color: #888;
	margin-bottom: 20px;
	border: 1px solid;
}

.interting{
	/* height: 40px; */
	
}

JS部分

myform = document.getElementById("login_form")

// 检查示例
// icon的类型有 'error', 'success' // 'info' // 'warning'
function check() {
  // 提示框使用示例
  $.toast({
    heading:'错误!!',
    icon: 'error',
    position: 'top-center'
  })

  //设置焦点示例
  $("#id01").focus()

  //返回false
  return false
}
//check() // ★★★ 答题开始后请注释本行 ★★★

// ================================================================================
// 此处答题开始

var button = document.getElementById("btn");
button.onclick = function(){
	var username = document.getElementById("username");
	if(username.value.length<4){
		alert("用户名不能少于4个字符")
		return;
	}
	
	var password1 = document.getElementById("password1");
	if(password1.value.length<8){
		alert("密码长度不能少于8个字符")
		return ;
	}

	
	var password2 = document.getElementById("password2");
	if(password1.value!=password2.value){
		alert("两次输入的密码不一致")
		return;
	}


	var birthday = document.getElementById("birthday")
	//alert(birthday.value)
	if(birthday.value==""){
		alert("请选择生日")
		return;
	}
	
	
	var hobbies = document.getElementsByClassName("interting");
	var count=0;
	for(var i=0;i<hobbies.length;i++){
		if(hobbies[i].checked){
			count++;
		}
	}
	if(count==0){
		alert("请至少选择一个爱好")
		return;
	}
}

function checkform() {
  if (check()) {
    return true
  } else {
    return false
  }
}

其中还有些细节没调好，不要太依赖我的

风雨之都之天下霸主

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2021-04-28

HTML部分<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta htt
复制链接

扫一扫