通过jQuery实现用户注册身份验证，当每个文本框失去焦点时进行该文本框内容校验，并将校验信息在文本框右侧显示出结果。

具体校验要求：

1、用户名由6-18位字符组成

2、密码由6-18位字符组成，且必须包含字母、数字和标点符号

3、确认密码必须和密码相同，否则提示密码不一致

4、电子邮件必须符合电子邮件格式

5、自我介绍不能为空

6、用户点击重置时清空所有文本框内容

7、用户点击提交是将用户信息存入对象user中，同时检查性别、出生日期是否选择，如果没有就弹出提示对话框，爱好至少选择一个，否支弹出提示。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>用户登录示例</title>

     <script src="jquery-3.4.1.js " type="text/javascript"> </script>

 </head>

 <body>

 <form id="userFrom" name="user" action="#" method="post">

     <table align="center" border="0" cellpadding="2" width="1000" >

         <tr>

             <td> 用户名</td>

             <td>

                 <input  name="username" type="text" id="txtUser">

             </td>

             <td id="info_username">*用户名由6-18位字符组成

             </td>

         </tr>

         <tr>

             <td>密&nbsp;&nbsp;码</td>

             <td>

                 <input id="txtPwd" name="password" type="password">

             </td>

             <td id="info_pwd">* 密码由6-18位字符组成，且必须包含字母、数字和标点符号</td>

         </tr>

         <tr>

             <td>确认密码</td>

             <td>

                 <input  name="pwdrepeat" type="password" id="txtRpt">

             </td>

             <td id="info_rpd">* 请再次输入密码</td>

         </tr>

         <tr>

             <td>用户类型</td>

             <td>

                 <select  name="userType" id="selUser">

                     <option  name="admin" value="admin">管理员</option>

                     <option  name="sysadmin" value="sysadmin">系统管理员</option>

                 </select>

             </td>

             <td>* 请选择用户类型</td>

         </tr>

         <tr>

             <td>性&nbsp;&nbsp;别</td>

             <td>

                 <input class="sex" type="radio" id="man" name="sex" value="male">男

                 <input class="sex" type="radio" id="woman" name="sex" value="2">女

             </td>

             <td>*请选择你的性别</td>

         </tr>

         <tr>

             <td>出生日期</td>

             <td>

                 <input class="Date" name="birthday" type="date" id="txtDate"/>

             </td>

             <td>*请选择你的出生日期</td>

         </tr>

         <tr>

             <td>兴趣爱好</td>

             <td>

                 <input class="hobby" type="checkbox" id="read" name="hobby" value="1">阅读

                 <input class="hobby" type="checkbox" id="music" name="hobby" value="2">音乐

                 <input class="hobby" type="checkbox" id="sport" name="hobby" value="3">运动

             </td>

             <td>*请选择兴趣爱好</td>

         </tr>

         <tr>

             <td>电子邮箱</td>

             <td>

                 <input name="email" type="email" id="txtMail"/>

             </td><td id="info_mail">* 用email找回密码</td>

         </tr>

         <tr>

             <td>自我介绍</td>

             <td>

                 <textarea name="introduction" id="txtIntro" cols="40" rows="5"></textarea>

             </td><td>*</td>

         </tr>

         <tr>

             <td colspan ="2"  align="center">

                 <input type="submit" name="submit"  id="register" value="提交"/>

                 <input  id="reset"type="reset"  value="重填"/>

             </td>

         </tr>

     </table>

 </form>

 </body>

 <script>

     $(document).ready(function() {

         /*用户名验证*/

         $("#txtUser").blur(function(){

             var username=$(this).val();

             if(checkUserName(username)){

                 $("#info_username").text("用户名正确");

             }else{

                 $("#info_username").text("用户名不符合要求，长度在8-16个字符");

             }

         });

         /*用户名验证功能定义*/

         function checkUserName(name){

             var re=/^[a-zA-Z0-9]{6,18}$/;

             if(re.test(name)){

                 return true;

             }

             else{

                 return false;

             }

         }

         /*密码验证*/

         $("#txtPwd").blur(function(){

             var password=$(this).val();

             if(checkPwd(password)){

                 $("#info_pwd").text("密码符合要求")

             }else{

                 $("#info_pwd").text("密码太简单")

             }

         });

         /*密码限制功能*/

         function checkPwd(pwd){

             var re=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{8,16}$/ ;

             if (re.test(pwd)){

                 return true;

             }else{

                 return false;

             }

         }

         /*再次确认密码*/

         $(function(){

             $("#txtRpt").blur(function(){

                 if($("#txtPwd").val()!=$("#txtRpt").val()){

                     $("#info_rpd").text("确认密码和密码不一致");

                 }else{

                     $("#info_rpd").text("确认密码和密码一致");

                 }

             })

         });

         /*邮箱验证*/

         $("#txtMail").blur(function(){

             var mail=$(this).val();

             if (checkMail(mail)){

                 $("#info_mail").text("邮箱地址格式正确");

             }else{

                 $("#info_mail").text("邮箱地址格式不正确");

             }

         });

         /*邮箱功能*/

         function checkMail(mail){

             var re=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;

             if(re.test(mail)){

                 return true;

             } else{

                 return false;

             }

         }

         /*提交功能*/

         $("#register").click(function(){

             var user={};

             var username=$("#txtUser").val();

             if(checkUserName(username)){

                 user.username=username;

             }else{

                 alert("用户名格式不正确");

                 return;

             }

             var  password=$("#txtPwd").val();

             if(checkPwd(password)){

                 user.password=password;

             }else{

                 alert("请重新输入密码");

                 return;

             }

             var rp=$("#txtRpt").val();

             if(password!=rp){

                 alert("确认密码和密码不一致");

                 return;

             }

             var type=$("#selUser").val();

             user.type=type;

             var sex=$(".sex:checked").val();

             if(sex!=null){user.sex=sex;

             }else{

                 alert("请选择性别");

                 return ;

             }

             var birthday=$("#txtDate").val();

             if (birthday==null) {

                 alert("请选择出生日期");

                 return ;

             }else{

                 user.birthday=birthday;

             }

             var hobby=new Array();

             $(".hobby:checked").each(function(){

                 hobby.push($(this).val())

             });

             if(hobby.length=0){

                 alert("请选择爱好");

                 return;

             }else{

                 user.hobby=hobby;

             }

             var mail=$("#txtMail").val();

             if (checkMail(mail)){

                 user.mail=mail;

             }

             else{

                 alert("请选择日期");

                 return;

             }

             var  introduction=$("#txtIntro").val();

             if(introduction==null){

                 user.introduction=introduction;

             }else{

                 alert("自我介绍不能空");

             }

             alert(user);

         });

     });

 </script>

 </html>

最新文章

  1. [原]ComFriendlyWaitForSingleObject
  2. CSS3判断手机横屏竖屏
  3. Android之Handler源码深入分析
  4. HDU 4948
  5. [jobdu]树的子结构
  6. Python---day5-各类模块的使用
  7. Spring boot——logback 基础使用篇（一）
  8. “无文件”恶意软件的威力：悄无声息一夜之间从ATM机中窃取80万美元
  9. Go基础之--接口
  10. Linux系统中将普通用户添加到sudoers
  11. gcd,lcm
  12. 【jsp】jsp中的动作元素
  13. python--文件I/O--11
  14. python yield yield from
  15. 开发框架：IOE 架构
  16. UOJ#328. 【UTR #3】量子破碎
  17. More about STALL
  18. Flask 学习（四）静态文件
  19. Codeforces766A Mahmoud and Longest Uncommon Subsequence 2017-02-21 13:42 46人阅读 评论(0) 收藏
  20. windows 建立任务执行计划 自动执行脚本

热门文章

  1. 规范化开发和time相关模块
  2. python3下scrapy爬虫(第六卷:利用cookie模拟登陆抓取个人中心页面）
  3. [LC] 122. Best Time to Buy and Sell Stock II
  4. mudbox卸载/完美解决安装失败/如何彻底卸载清除干净mudbox各种残留注册表和文件的方法
  5. Nginx笔记总结五:Nginx配置虚拟主机
  6. 配置Oracle10g即时客户端plsql的配置
  7. 《JavaScript算法》二分查找的思路与代码实现
  8. 旅游机票类专业名词---PNR
  9. 云服务器之——Linux下配置JDK环境
  10. 变身六次失去核心的小米Note还能火吗