html代码
<section id="register"> <div><img src="images/logo.jpg" alt="logo" /><img src="images/banner.jpg" alt="banner" /></div> <h1 class="hr_1">新用户注册</h1> <form action="" method="post" name="myform"> <dl> <dt>用户名:</dt> <dd><input id="user" type="text" /><div id="user_prompt">用户名由英文字母和数字组成的4-16位字符,以字母开头</div></dd> </dl> <dl> <dt>密码:</dt> <dd><input id="pwd" type="password" /><div id="pwd_prompt">密码由英文字母和数字组成的4-10位字符</div></dd> </dl> <dl> <dt>确认密码:</dt> <dd><input id="repwd" type="password"/><div id="repwd_prompt"></div></dd> </dl> <dl> <dt>电子邮箱:</dt> <dd><input id="email" type="text"/><div id="email_prompt"></div></dd> </dl> <dl> <dt>手机号码:</dt> <dd><input id="mobile" type="text" /><div id="mobile_prompt"></div></dd> </dl> <dl> <dt>生日:</dt> <dd><input id="birth" type="text"/><div id="birth_prompt"></div></dd> </dl> <dl> <dt> </dt> <dd><input name="" type="image" src="images/register.jpg" class="btn" /></dd> </dl> </form> </section>
jQuery代码
<script> $(function(){ $("#user").blur(checkname) $("#pwd").blur(checkpwd) $("#mobile").blur(checkmobile) $("#birth").blur(checkbirth) }) function checkname(){ var names=/^[a-zA-Z][a-zA-Z0-9]{3,15}$/ var $users=$("#user_prompt") var $user=$("#user").val() if(names.test($user)==false){ $users.html("用户名由英文字母和数字组成的4-16位字符,以字母开头") return false; } $users.html(""); return true; } function checkpwd(){ var pwds=/^[a-zA-Z0-9]{4,10}$/ var pwd=$("#pwd").val(); var $pwds=$("#pwd_prompt") if(pwds.test(pwd)==false){ $pwds.html("密码由英文字母和数字组成的4-10位字符") return false } $pwds.html("") return true; } function checkmobile(){ var mobile=/^1[0-9]{10}$/ var mobiles=$("#mobile").val() var $mobile=$("#mobile_prompt") if(mobile.test(mobiles)==false){ $mobile.html("手机号码只能是1开头的11位数字") return false } $mobile.html("") return true } function checkbirth(){ var birth=/^((19\d{2})|(200\d)|(201[0-6]))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/ //出生日期不在2016年之后 var births=$("#birth").val(); var $birth=$("#birth_prompt") if(birth.test(births)==false){ $birth.html("生日格式不正确") return false } $birth.html("") return true } </script>