标签： 效果展示 代码 背景图自行贴入
标签：
效果展示
配景图自行贴入，如果需要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> <table> <tr> <td>用户名：</td> <td><input type="text" onfocus="focusUname()" onblur="checkUname()"> <span></span></td> </tr> <tr> <td>暗码：</td> <td><input type="text" onfocus="focusPsw()" onblur="checkPsw()"> <span></span></td> </tr> <tr> <td>确认暗码：</td> <td><input type="text" onfocus="focusAsurePsw()" onblur="checkAsurePsw()"> <span></span></td> </tr> <tr> <td>手机号：</td> <td><input type="text" onfocus="focusTel()" onblur="checkTel()"> <span></span></td> </tr> <tr> <td>邮箱：</td> <td><input type="text" onfocus="focusMail()" onblur="checkMail()"> <span></span></td> </tr> <tr> <td>性别：</td> <td><input type="radio" checked="checked">男 <input type="radio"/>女</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></span></td> </tr> <tr> <td>喜好：</td> <td><input type="text" value="请使用逗号分隔断绝分手"></td> </tr> <tr> <td>小我私家介绍：</td> <td><textarea></textarea></td> </tr> <tr> <td>验证码：</td> <td><input type="text" onblur="checkVerificationCode()"> <span></span> <span></span> </td> </tr> <tr> <td></td> <td colspan="2" ><input type="checkbox">是否同意本公司协议</td> </tr> <tr> <td colspan="2"><input type="button" value="当即注册"/></td> </tr> </table> </body> </html>
22 js表单大操练——注书页面模拟
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30847.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")