效果展示
代码
背景图自行贴入, 如果需要 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>
来源: http://www.bubuko.com/infodetail-3400099.html