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>