<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../js/jquery-1.8.3.js"></script> <script src="../js/jquery.validate.min.js"></script> <script src="../js/messages_zh.js"></script> <style> #father{ height: 800px; width: 700px; /*border: 1px solid red;*/ margin: auto; } .first{ height: 600px; width: 600px; /*border:1px solid;*/ margin: 30px; font-size: 25px; } input{ height: 30px; width: 300px; margin-top: 30px; } label.error{ color: red; font-size: 18px; } </style> <script> $(function(){ $("#formCheck").validate({ rules:{ user:{ required:true, minlength:6 }, password:{ required:true, minlength:6, digits:true }, repassword:{ required:true, minlength:6, digits:true }, email:{ required:true, email:true } }, messages:{ user:{ required:"用户名不能为空", minlength:"用户名不少于6" }, password:{ required:"密码不能为空", minlength:"密码不少于6位", digits:"密码必须为正数" }, repassword:{ required:"确认密码不能为空", minlength:"确认密码不少于5位", digits:"确认密码为整数" }, email:{ required:"邮箱不能为空", email:"邮箱格式不正确" }, } }) }) </script> </head> <body> <div id="father"> <h1>会员注册 <span style="color:#FFAB73 ; font-size: 18px;">小米商城</span> </h1> <hr style="height: 2px; background-color:#FF8D41 ; 700px;"/> <div class="first"> <form action="#" method="post" id="formCheck"> 用 户 名：<input type="text" placeholder="请输入你的用户名" name="user" id="user" /><br /> 密 码：<input type="password" placeholder="请输入你的密码" name="password" id="password" /><br /> 确认密码：<input type="password" placeholder="请确认你的密码" name="repassword" id="repassword" /><br /> 邮 箱：<input type="email" placeholder="请输入你的邮箱" name="email" id="email" /><br /> <input type="submit" value="立 即 注 册" style="background: #FF6600;font-weight: bold; color: white;"/> </form> </div> </div> </body> </html>