<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { margin: 0; padding: 0; font-size: 12px; line-height: 20px; } .main { width: 525px; margin-left: auto; margin-right: auto; } .hr_1 { font-size: 14px; font-weight: bold; color: #3275c3; height: 35px; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #3275c3; vertical-align: bottom; padding-left: 12px; } .left { text-align: right; width: 80px; height: 25px; padding-right: 5px; } .center { width: 135px; } .inputClass { width: 130px; height: 16px; border: solid 1px #79abea; } div { color: #f00; } </style> </head> <body> <table class="main" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/logo.jpg" width="150" height="57" alt="logo"/><img src="images/banner.jpg" width="375" height="57" alt="banner"/></td> </tr> <tr> <td class="hr_1">新用户注册</td> </tr> <tr> <td style="height:10px;"></td> </tr> <form action="Success.html" method="post" name="myform" οnsubmit="return checkall()"> <tr> <td> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="left">用户名:</td> <td class="center"><input id="user" type="text" class="inputClass" οnblur="checkuser()"/></td> <td> <div id="user_prompt">用户名由4-16位字符组成,不能包含数字</div> </td> </tr> <tr> <td class="left">密码:</td> <td class="center"><input id="pwd" type="password" class="inputClass" οnblur="checkpwd()"/></td> <td> <div id="pwd_prompt">密码由4-10位字符组成</div> </td> </tr> <tr> <td class="left">确认密码:</td> <td class="center"><input id="repwd" type="password" class="inputClass" οnblur="checkrepwd()"/> </td> <td> <div id="repwd_prompt">再次输入密码</div> </td> </tr> <tr> <td class="left">电子邮箱:</td> <td class="center"><input id="email" type="text" class="inputClass" οnblur="checkemail()"/></td> <td> <div id="email_prompt">邮箱格式示例:web@163.com</div> </td> </tr> <tr> <td class="left">手机号码:</td> <td class="center"><input id="mobile" type="text" class="inputClass" οnblur="checkmobile()"/> </td> <td> <div id="mobile_prompt">由1开头的11位数</div> </td> </tr> <tr> <td class="left">出生日期:</td> <td class="center"><input id="birth" type="text" class="inputClass" οnblur="checkbirth()"/></td> <td> <div id="birth_prompt">请按xxxx-xx-xx输入出生日期</div> </td> </tr> <tr> <td class="left"> </td> <td class="center"><input name="" type="image" src="images/register.jpg"/></td> <td> </td> </tr> </table> </td> </tr> </form> </table> </body> <script type="text/javascript"> //返回id function $(id) { return document.getElementById(id); } //验证用户名 function checkuser() { var user = $("user").value; $("user_prompt").innerHTML = ""; var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/; if (reg.test(user) == false) { $("user_prompt").innerHTML = "用户名不合法"; return false; }else{ return true; } } //验证密码 function checkpwd() { var pwd = $("pwd").value; $("pwd_prompt").innerHTML = ""; var reg = /^[A-Za-z0-9]{4,10}$/; if (reg.test(pwd) == false) { $("pwd_prompt").innerHTML = "密码设置不正确"; return false; } return true; } //验证确认密码 function checkrepwd() { var pwd = $("pwd").value; var repwd = $("repwd").value; if (pwd != repwd) { $("repwd_prompt").innerHTML = "确认密码与密码不正确"; return false; } $("repwd_prompt").innerHTML = ""; return true; } //验证邮箱 function checkemail() { var email = $("email").value; $("email_prompt").innerHTML = ""; var reg = /^\w+@\w+\.\w+[(com)|(cn)]$/; if (reg.test(email) == false) { $("email_prompt").innerHTML = "邮箱格式不合法"; return false; } return true; } //验证手机 function checkmobile() { var mobile = $("mobile").value; var reg = /^1\d{10}$/; if (reg.test(mobile) == false) { $("mobile_prompt").innerHTML = "手机号码不合法"; return false; } $("mobile_prompt").innerHTML = ""; return true; } //验证出生日期 function checkbirth() { var birth = $("birth").value; $("birth_prompt").innerHTML = ""; var reg = /^(19\d{2}|20[0-1][0-4])-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/; if (reg.test(birth) == false) { $("birth_prompt").innerHTML = "出生日期不合法"; return false; } return true; } function checkall() { if (checkuser() && checkpwd() && checkrepwd() && checkemail() && checkmobile() && checkbirth()){ return true; } else{ return false; } } </script> </html>
正则表达式验证注册页面
最新推荐文章于 2022-03-31 16:32:00 发布