首页 > 代码库 > jquery--登陆注册【精简优化】

jquery--登陆注册【精简优化】

2024-07-23 11:12:31   211人阅读

一、登陆页面:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Insert title here</title >
<link rel= "stylesheet" type ="text/css" href="../../style/css.css" />
<script type= "text/javascript" src="../../script/jquery-1.7.2.js" ></script>
<script type= "text/javascript" src="../../script/common.js" ></script>
<script type= "text/javascript">

     $(function(){
          
           //1.用户名
          $( ":text[name=userName]").focus(function (){
               //得到焦点时，判断当前文本框中的值，如果是默认值，则删除
               if(this .value =http://www.mamicode.com/= this.defaultValue) {
                    this.value =http://www.mamicode.com/ "" ;
              }
          }).blur( function(){
               //失去焦点时对文本内容进行验证
               //去前后空格
               var userNameStr = $.trim(this.value);
              
               //如果去掉前后空格后为空字符串，则恢复为默认值
               if(userNameStr == "" ) {
                   userNameStr = this.defaultValue;
              }
              
               //使用正则表达式进行验证
               showError(regObj.userNameReg.test(userNameStr), errorMsg.userNameFlag);
              
               //最后将去掉前后空格的值写回文本框
               this.value = http://www.mamicode.com/userNameStr;
              
               //设置能否提交的标识符
              submitFlag.userNameFlag = regObj.userNameReg.test(userNameStr);
              
          });
          
           //2.密码
          $( ":password[name=pwd]").blur(function (){
              
               var pwdStr = $.trim(this.value);
              showError(regObj.pwdReg.test(pwdStr), errorMsg.pwdFlag);
              submitFlag.pwdFlag = regObj.pwdReg.test(pwdStr);
              
          });
          
           //3.确认密码
          $( ":password[name=pwdAgain]").blur(function (){
              
               var pwdStr = $(":password[name=pwd]" ).val();
               var pwdAgainStr = $.trim(this.value);
              
              showError((pwdStr == pwdAgainStr), errorMsg.pwdAgainFlag);
              
              submitFlag.pwdAgainFlag = (pwdStr == pwdAgainStr);
              
          });
          
           //4.email
          $( ":text[name=email]").blur(function (){
              
               var emailStr = $.trim(this.value);
              
               if(emailStr == "" ) {
                   
                   showError( true, null );
                   submitFlag.emailFlag = true;
                   
              } else{
                   
                   showError(regObj.emailReg.test(emailStr), errorMsg.emailFlag);
                   submitFlag.emailFlag = regObj.emailReg.test(emailStr);
                   
              }
              
          });
          
          
           //5.提交按钮
          $( ":submit").click(function (){
              
               for ( var flag in submitFlag) {
                   
                    if(!submitFlag[flag]) {
                        
                        showError( false, errorMsg[flag]);
                        
                         //阻止表单提交
                         return false ;
                   }
                   
              }
              
          });
          
           //6.重置
          $( ":reset").click(function (){
              
               //设置提示消息为空
              showError( true, null );
              
               //设置提交标记对象为初始值
              submitFlag.reset();
              
          });
          
     });

</script>
</head>
<body>
     
     <form action="registSuccess.html" method= "post">
           <table id= "formTable">
               <tr>
                    <td colspan= "2" id ="msgTd"> &nbsp;</td >
               </tr>
               <tr>
                    <td> 用户名：</td >
                    <td>< input class ="formInp" type= "text" name="userName" value="请输入用户名" /></ td>
               </tr>
               <tr>
                    <td> 密码：</td >
                    <td>< input class ="formInp" type="password" name="pwd" /></td>
               </tr>
               <tr>
                    <td> 确认密码：</td >
                    <td>< input class ="formInp" type="password" name="pwdAgain" /></td>
               </tr>
               <tr>
                    <td> 邮箱：</td >
                    <td>< input class ="formInp" type= "text" name="email" /></td >
               </tr>
               <tr>
                    <td> 验证码：</td >
                    <td>
                         <input class= "inpType" id="codeInp" type="text" name= "code" />
                         <img id= "codeImg" src="../../images/Validate.jpg" />
                    </td>
               </tr>
               <tr>
                    <td colspan= "2" class ="centerTd">
                         <input class= "btn" type ="submit" id="submitBtn" value="注册" />
                         <input class= "btn" type ="reset" id="resetBtn" value="重置" />
                    </td>
               </tr>
           </table>
     </form >

</body>
</html>


二、注册页面

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Insert title here</title >
<link rel= "stylesheet" type ="text/css" href="../../style/css.css" />
<script type= "text/javascript" src="../../script/common.js" ></script>
<script type= "text/javascript" src="../../script/jquery-1.7.2.js" ></script>
<script type= "text/javascript">

     $(function(){
          
           //1.用户名
          $( ":text[name=userName]").focus(function (){
              
               if(this .value =http://www.mamicode.com/= this.defaultValue) {
                    this.value =http://www.mamicode.com/ "" ;
              }
              
          }).blur( function(){
              
               var userNameStr = $.trim(this.value);
               if(userNameStr == "" ) {
                   userNameStr = this.defaultValue;
              }
              
               showError(regObj.userNameReg.test(userNameStr), errorMsg.userNameFlag);
              
              submitFlag.userNameFlag = regObj.userNameReg.test(userNameStr);
              
               this.value = http://www.mamicode.com/userNameStr;
              
          });
          
           //2.密码
          $( ":password").blur(function (){
              
               var pwdStr = $.trim(this.value);
              
              showError(regObj.pwdReg.test(pwdStr), errorMsg.pwdFlag);
              
              submitFlag.pwdFlag = regObj.pwdReg.test(pwdStr);
              
          });
          
           //3.登录按钮
          $( ":submit").click(function (){
               //如果用户名不为真
               if(!submitFlag.userNameFlag){
                   showError( false, errorMsg.userNameFlag);
                    return false ;
              }
               //如果密码不为真
               if(!submitFlag.pwdFlag) {
                   
                   showError( false, errorMsg.pwdFlag);
                    return false ;
                   
              }
              
          });
          
           //4.重置按钮
          $( ":reset").click(function (){
              
              showError( true, null );
              
              submitFlag.reset();
              
          });
          
     });

</script>
</head>
<body>
     
     <form action="loginSuccess.html" method= "post">
           <table id= "formTable">
               <tr>
                    <td colspan= "2" id ="msgTd"> &nbsp;</td >
               </tr>
               <tr>
                    <td> 用户名：</td >
                    <td>< input class ="formInp" type= "text" name="userName" value="请输入用户名" /></ td>
               </tr>
               <tr>
                    <td> 密码：</td >
                    <td>< input class ="formInp" type="password" name="pwd" /></td>
               </tr>
               <tr>
                    <td colspan= "2">
                         <input type= "checkbox" name="rememberMe" value="rm" />记住我
                    </td>
               </tr>
               <tr>
                    <td colspan= "2" class ="centerTd">
                         <input class= "btn" type ="submit" id="submitBtn" value="登录" />
                         <input class= "btn" type ="reset" id="resetBtn" value="重置" />
                    </td>
               </tr>
           </table>
     </form >
     
     <div id="languageDiv"> 中文|English</div >

</body>
</html>


三、common.js

/**
 * 导入jQuery后，删除了myTrim()函数，同时将regObj对象中的spaceReg删除
 */

// 将全部的正则表达式封装为一个对象
var regObj = {
          
     userNameReg : /^[a-zA-Z_][a-zA-Z_\-0-9]{5,9}$/,
     pwdReg : /^[a-zA-Z0-9]{6,12}$/,
     emailReg : /^[a-zA-Z0-9_\.-]+@([a-zA-Z0-9-]+[\.]{1})+[a-zA-Z]+$/

};

// 使用全局变量作为表单提交能否放行的标记
var submitFlag = {
     userNameFlag : false,
     pwdFlag : false,
     pwdAgainFlag : false,
     emailFlag : true,// Email默认情况下允许提交
     reset : function() {
           this.userNameFlag = false;
           this.pwdFlag = false;
           this.pwdAgainFlag = false;
           this.emailFlag = true;
     },
     toString : function(){
           return this .userNameFlag + " " + this.pwdFlag + " " + this .pwdAgainFlag + " " + this.emailFlag;
     }
};

// 将错误消息封装到一个对象中
var errorMsg = {
     userNameFlag : "^_^用户名要求6-10位且由数字字母下划线-组成" ,
     pwdFlag : "^_^密码要求6-12位大小写字母数字" ,
     pwdAgainFlag : "^_^确认密码必须和密码一致" ,
     emailFlag : "^_^Email格式不正确"
};

function showError(flag, message) {
     if(flag) {
           //如果能够通过验证，则清除错误信息
           //使用text()函数不能正确识别&nbsp;，所以改用 html()函数
          $( "#msgTd").html("&nbsp;" );
     }else{
           //如果不能通过验证，则在#msgTd显示错误信息
          $( "#msgTd").html(message);
     }
}


jquery--登陆注册【精简优化】


联系
我们