使用jquery+ajax方式实现用户注册时，检测用户名是否存在

最新推荐文章于 2021-08-06 05:34:35 发布

poclist

最新推荐文章于 2021-08-06 05:34:35 发布

阅读量4.5k

点赞数 1

分类专栏： php

php 专栏收录该内容

150 篇文章 1 订阅

订阅专栏

使用jquery+ajax方式实现用户注册时，检测用户名是否存在

[html]view plaincopy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
   
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
     <title>使用jquery+ajax方式实现用户注册时，检测用户名是否存在</title>  
     <style type="text/css">  
       /*  
         当用户没有输入用户名，设置text边框为红色，否则为默认样式。  
       */  
     .UserText  
     {  
       border:1px solid red;  
         }  
     </style>  
     <script type="text/javascript" src="jquery-1.6.2.min.js"></script>  
     <script type="text/javascript">  
         $(document).ready(function () {  
             //给检验按钮注册事件  
             $('#Regist').click(function () {  
                 var userName = $('#UserName').val();  
                 if ($.trim(userName) == "") { //用户输入不能为空或空格.  
                     alert("用户名不能为空");  
                 }  
                 else {  
                     //后台处理数据验证  
                     $.get("jquery/UserRegist.aspx", { userName: userName }, function (data) {  
                         $('#divMsg').html(data); //接受服务器处理返回数据，填充在div中  
                     });  
                 }  
             });  
             //注册文本框事件  
             $('#UserName').keyup(function () {  
                 var username = $(this).val();//获取当前文本框内容  
                 if ($.trim(username) == "") {  
                     $(this).addClass('UserText');//为空时添加红色边框  
                 }  
                 else {  
                     $(this).removeClass('UserText');//不为空则移除  
                 }  
             });  
         });  
     </script>  
 </head>  
 <body>  
 请输入用户名：<input type="text" id="UserName"/>  
 <input type="button" id="Regist" value="检验" />  
 <div id="divMsg"></div>  
 </body>  
 </html>  