目录
由js从html中获取相关输入的信息,并进行判断:
作为理解的话可以看一下,css部分随便写的,主要看js部分和html部分
<!DOCTYPE html>
<html lang="en">
<!-- onblur失去焦点时发生;onkeyup事件会在键盘被松开时触发;onfocus焦点事件placeholder提示输入框中所需的内容;
checked默认选择-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta id="viewport" content="width=device-width, initial-scale=1.0">
<title>注册页面</title>
<style>
.biaodan {
border: solid 1px black;
text-align: center;
margin: 40px;
padding: 20px;
height: 400px;
width: 300px;
position: relative;
left: 36%;
top: 50%;
background-color: rgb(236, 238, 216);
}
</style>
<script>
function shoeTips(spanid,tips){
var span=document.getElementById(spanid);
span.innerHTML=tips;
}
function hint(){
var value=document.getElementById('value').value;
var hint=document.getElementById('hint');
if(value.length<6){
hint.innerHTML='*账号太短';
return false;
}
else if(value.length>8){
hint.innerHTML='*账号太长';
return false;
}
else{
hint.innerHTML='*账号合适';
return true;
}
}
function hint_hide(){
var hint=document.getElementById('hint')
hint.innerHTML=''
}
function checkPass(){
var pass_value=document.getElementById('pass_value').value;
var pass_hint=document.getElementById('pass_hint');
if(pass_value.length!=6){
pass_hint.innerHTML='密码长度错误';
return false;
}
else{
pass_hint.innerHTML='密码格式正确';
return true;
}
}
function pass_hide(){
var pass_hint=document.getElementById('pass_hint');
pass_hint.innerHTML='';
}
function checkPass_2(){
var pass_value=document.getElementById('pass_value').value;
var pass_value_2=document.getElementById('pass_value_2').value;
var pass_hint_2=document.getElementById('pass_hint_2');
if(pass_value_2!=pass_value){
pass_hint_2.innerHTML='密码不一致';
return false;
}
else{
pass_hint_2.innerHTML='';
return true;
}
}
function pass_hide_2(){
var pass_hint_2=document.getElementById(pass_hint_2);
pass_hint_2.innerHTML='';
}
function checkForm(){
var flag=hint() && checkPass() && checkPass_2();
return flag;
}
</script>
</head>
<body>
<form action="#" onsubmit="return checkForm()">
<div class="biaodan">
<h3>欢迎来到注册界面</h3>
<br>
账号:<input type="text" id="value" name="user_name" onfocus="shoeTips('hint','账号长度不能小于6,不能大于8')" onkeyup="hint()" onblur="hint_hide()">
<span id="hint"></span>
<br>
<br>
密码:<input type="password" id="pass_value" name="pass_name" onfocus="shoeTips('pass_hint','密码长度为6位')" onkeyup="checkPass()" onblur="pass_hide()">
<span id="pass_hint"></span>
<br>
<br>
确认密码:<input type="password" id="pass_value_2" name="pass_name_2" onfocus="shoeTips('pass_hint_2','再次输入密码')" onkeyup="checkPass_2()" onblur="pass_hide_2()">
<span id="pass_hint_2"></span>
<br>
<br>
性别:<label for="man"></label> 男<input type="radio" id="man" name="sex" checked="checked">
<label for="woman"></label> 女<input type="radio" id="woman" name="sex" >
<br>
<br>
爱好:
旅游<input type="checkbox" id="checkboxchoose" >
游戏<input type="checkbox" id="checkboxchoose" >
撩妹<input type="checkbox" id="checkboxchoose" checked="checked">
看书<input type="checkbox" id="checkboxchoose" >
<br>
<br>
<br>
<input type="submit" id="sure">
</div>
</form>
</body>
</html>