22 js表单大练习——注册页面模拟
效果展示
代码
背景图自行贴入，如果需要copy代码的话。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<style>
html,body{
margin: 0,0;
padding: 0,0;
}
html{
background-image: url(imgs/bg.jpg);
background-size: 100%;
}
table{
border: 1px gray solid;
margin: auto;
margin-top: 200px;
color:white;
background-color: rgba(69, 75, 86, .5);
width: 550px;
height: 650px;
font-size: 17px;
}
table tr td:first-child{
padding-left: 40px;
width: 80px;
}
table tr td span{
font-size: 14px;
}
table tr td:nth-child(2){
width: 240px;
}
</style>
<script type="text/javascript">
//用户名校验
function focusUname(){
var span = document.getElementById("unameSpan");
span.style="color:white;font-size:14px"
span.innerHTML="*请输入2-5位中文"
}
function checkUname(){
var value = document.getElementById("uname").value;
var span = document.getElementById("unameSpan");
var reg = /^[\u4e00-\u9fa5]{2,5}$/;
if(reg.test(value)){
span.innerHTML="√"
span.style="color:#00ff00;font-size:14px"
}else{
span.innerHTML="不符合要求";
span.style="color:red;font-size:14px"
}
}
//检查密码
function focusPsw(){
var span = document.getElementById("pswSpan");
span.style="color:white;font-size:14px"
span.innerHTML="*8-16个字符，至少1个大写字母，1个小写字母和1个数字"
}
function checkPsw(){
var value = document.getElementById("psw").value;
var span = document.getElementById("pswSpan");
var reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{8,16}$/;
if(reg.test(value)){
span.innerHTML="√"
span.style="color:#00ff00;font-size:14px"
}else{
span.innerHTML="不符合要求";
span.style="color:red;font-size:14px"
}
}
//确认密码检查
function focusAsurePsw(){
var span = document.getElementById("asurePswSpan");
span.style="color:white;font-size:14px"
span.innerHTML="*请再次输入密码"
}
function checkAsurePsw(){
var value1 = document.getElementById("psw").value;
var value2 = document.getElementById("asurePsw").value;
var span = document.getElementById("asurePswSpan");
if(value1==value2){
span.innerHTML="√"
span.style="color:#00ff00;font-size:14px"
}else{
span.innerHTML="密码不一致";
span.style="color:red;font-size:14px"
}
}
//手机号码检查
function focusTel(){
var span = document.getElementById("telSpan");
span.style="color:white;font-size:14px"
span.innerHTML="*请输入手机号"
}
function checkTel(){
var value = document.getElementById("tel").value;
var span = document.getElementById("telSpan");
var reg = /^1[3456789]\d{9}$/
if(reg.test(value)){
span.innerHTML="√"
span.style="color:#00ff00;font-size:14px"
}else{
span.innerHTML="格式错误";
span.style="color:red;font-size:14px"
}
}
//邮箱检查
function focusMail(){
var span = document.getElementById("mailSpan");
span.style="color:white;font-size:14px"
span.innerHTML="*请输入邮箱"
}
function checkMail(){
var value = document.getElementById("mail").value;
var span = document.getElementById("mailSpan");
var reg = /([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/
if(reg.test(value)){
span.innerHTML="√"
span.style="color:#00ff00;font-size:14px"
}else{
span.innerHTML="格式错误";
span.style="color:red;font-size:14px"
}
}
//验证码校验
function createCode(){
var codeSpan = document.getElementById("verificationCodeSpan");
var randomNumber = Math.floor(Math.random()*9000+1000);
codeSpan.innerText=randomNumber;
createCode.prototype.value = randomNumber;
}
function checkVerificationCode(){
var value1 = document.getElementById("verificationCode").value;
var value2 = createCode.prototype.value;
var span = document.getElementById("verificationCodeSpan2");
if(value1==value2){
span.innerHTML="√"
span.style="color:#00ff00;font-size:14px"
}else{
span.innerHTML="验证码错误";
span.style="color:red;font-size:14px"
}
}
</script>
</head>
<body onload="createCode()">
<table>
<tr>
<td>用户名：</td>
<td><input type="text" onfocus="focusUname()" onblur="checkUname()" id="uname">
<span id="unameSpan"></span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="text" id="psw" onfocus="focusPsw()" onblur="checkPsw()">
<span id="pswSpan"></span></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="text" id="asurePsw" onfocus="focusAsurePsw()" onblur="checkAsurePsw()">
<span id="asurePswSpan"></span></td>
</tr>
<tr>
<td>手机号：</td>
<td><input type="text" id="tel" onfocus="focusTel()" onblur="checkTel()">
<span id="telSpan"></span></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="mail" onfocus="focusMail()" onblur="checkMail()">
<span id="mailSpan"></span></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="gender" checked="checked">男
<input type="radio" name="gender"/>女</td>
</tr>
<tr>
<td>籍贯：</td>
<td><select type="address">
<option value ="0">---请选择---</option>
<option value ="0">贵州</option>
<option value ="0">云南</option>
<option value ="0">四川</option>
<option value ="0">重庆</option>
<option value ="0">湖南</option>
<option value ="0">湖北</option>
<option value ="0">河南</option>
<option value ="0">河北</option>
<option value ="0">安徽</option>
<option value ="0">天津</option>
<option value ="0">北京</option>
<option value ="0">青海</option>
<option value ="0">西藏</option>
<option value ="0">新疆</option>
<option value ="0">内蒙古</option>
<option value ="0">黑龙江</option>
<option value ="0">吉林</option>
<option value ="0">山东</option>
<option value ="0">广州</option>
<option value ="0">广西</option>
<option value ="0">海南</option>
<option value ="0">香港</option>
<option value ="0">澳门</option>
<option value ="0">台湾</option>
</select>
<span id="addressSpan"></span></td>
</tr>
<tr>
<td>爱好：</td>
<td><input type="text" value="请使用逗号分隔"></td>
</tr>
<tr>
<td style="vertical-align: top;">个人介绍：</td>
<td><textarea style="resize: none;width: 380px;height: 100px;"></textarea></td>
</tr>
<tr>
<td>验证码：</td>
<td><input type="text" style="width: 70px;" id="verificationCode" onblur="checkVerificationCode()">
<span id="verificationCodeSpan" style="padding-left: 20px;font-size: 20px;"></span>
<span id="verificationCodeSpan2"></span>
</td>
</tr>
<tr>
<td style="text-align: right;"></td>
<td colspan="2" ><input type="checkbox">是否同意本公司协议</td>
</tr>
<tr>
<td style="text-align: center;" colspan="2"><input type="button" value="立即注册"/></td>
</tr>
</table>
</body>
</html>
浙公网安备 33010602011771号