本文详细介绍了如何使用JavaScript实现用户登录验证的功能，包括前端界面的实现和后端逻辑的处理，通过实例代码展示了如何利用Freemarker模板引擎和Ajax进行交互。
前几天一直在忙毕业相关的事情，今天来公司了继续项目开发。今天写的是用户登录验证相关的js脚本。js我个人不是很熟悉，但是通过看之前同事开发的项目的相关脚本之后，有一点意识了。下面就讲讲用户登录验证的js。
登录界面是使用freemarker来实现的，相关代码如下：
<body> <div class="login-box"> <div class="login-box-t"> <a href="<#if accountName?has_content>ServerList.do<#else>javascript:void(0)</#if>" id="login_href" class="start-btn" hidefocus="hide"></a><！--accountName是从某个action传过来的值，如果用户成功登录之后点击此处就会跳到服务器列表--> </div> <div class="login-box-c"> <div class="tips-wrap" id="tips_info" style="display:none;"> <div class="tips-content" id="msg_error"></div> </div> <div id="login_info_area" style="<#if accountName?has_content><#else>display:none;</#if>"> <p>${accountName?default('')}，您好！</p> <p>欢迎来到</p> </div> <div id="login_form_area"<#if accountName?has_content> style="display:none;"</#if>> <form id="form_login" name="formlogin" method="post" action="a/login.do" onsubmit="return false"> <div class="line"> <div class="label">用户名：</div> <div class="input"> <input type="hidden" id="txt_account_tip" value="输入帐号/数字ID/邮箱" /> <input type="text" id="txt_useraccount" name="account.userAccount" class="txt" maxlength="50" value="<#if accountName?has_content>${accountName}</#if>" tabindex="1" /> </div> </div> <div class="line"> <div class="label">密码：</div> <div class="input"> <input type="password" id="txt_userpassword" name="account.userPassword" class="txt" maxlength="16" tabindex="2"/> </div> </div> <div class="line"> <div class="label">验证码：</div> <div class="vc-input"> <input type="text" id="txt_validatecode" name="account.validateCode" class="txt" maxlength="4" tabindex="3"/> </div> <div class="vc"><a id="lnk_vcode" valign="absmiddle" title="看不清？请点击切换验证码。" href="javascript:void(0)" onclick="changeCode('#lnk_vcode');return false;" hidefocus="hide"><img src="${systems.mainUrl}/g/validateCode.jsp" alt="" width="65" height="30" /></a></div> </div> <div class="line"> <a href="javascript:void(0)" id="btn_login" class="login-btn" hidefocus="hide">登 录</a> </div> </form> </div> </div> <div class="login-box-b"></div> </div> <script type="text/javascript"> // <![CDATA[ $(function() { LoginUI.initLoginForm(); }); // ]]> </script> </body>上面这个ftl文件其实很简单，主要还是freemarker的一些语法，稍微看一下freemarker就可以写出来的。要注意的是最后的// <![CDATA[ $(function() { LoginUI.initLoginForm(); }); // ]]>这段代码，XML中的CDATA段用于声明不应被解析为标签的文本（XHTML也是如此），这样就可以使用特殊字符，如小于（<）、大于（>）、和号（&）和双引号（"），而不必使用它们的字符实体。但是单单使用<![CDATA[的时候也会带来问题，大多数浏览器都不完全支持XHTML，这就带来主要问题，即这在JavaScript中是个语法错误，因为大多数浏览器还不认识CDATA段，这时就要像上面那样使用''//''这样可在不影响代码语法的情况下嵌入CDATA段，//并不是注释语法。下面就要看下LoginUI的写法了，这个类（我们姑且将它称作类吧，因为它里面也可以放入参数和方法）的主要代码如下：
(function($, window) { function showTipMessage(msgTip, tipInfo, msg) { msgTip.text(msg); tipInfo.show(null); } function hideTipMessage(tipInfo) { tipInfo.hide(null); } function checkAccName(accName, msgTip, tipInfo) { accName = trim(accName); if(accName.length < 5) { msgTip.text('登录帐号填写错误！'); tipInfo.show(null); return false; } return true; } function checkPassword(accPwd, msgTip, tipInfo) { accPwd = trim(accPwd); if(accPwd.length < 8) { msgTip.text('登录密码填写错误！'); tipInfo.show(null); return false; } return true; } function checkVcode(vcode, msgTip, tipInfo) { vcode = trim(vcode); if(vcode.length != 4) { msgTip.text('验证码填写错误！'); tipInfo.show(null); return false; } return true; } var LoginUI = window.LoginUI = {}; Object.extend(LoginUI, { initLoginForm: function() { this.el = { form: $('#form_login'), accName: $('#txt_useraccount'), accPwd: $('#txt_userpassword'), vcode: $('#txt_validatecode'), vcodeHandler: $('#lnk_vcode'), accTip: $('#txt_account_tip'), msgTip: $('#msg_error'), tipInfo: $('#tips_info'), btnLogin: $('#btn_login') }; this.assignEvents(); }, destroy: function() { this.el.accName.unbind(); this.el.accPwd.unbind(); this.el.vcode.unbind(); this.el.btnLogin.unbind(); this.el.msgTip.val(String.Empty); }, login: function(btnLogin) { if(btnLogin.className.indexOf('disabled') != -1) return; $(btnLogin).addClass('login-btn-disabled'); Ajax.formSubmit(this.el.form, { beforeSubmit: function() { var accName = LoginUI.el.accName.val(), accPwd = LoginUI.el.accPwd.val(), vcode = LoginUI.el.vcode.val(); var msgTip = LoginUI.el.msgTip, tipInfo = LoginUI.el.tipInfo, result = true; if(!checkAccName(accName, msgTip, tipInfo)) { LoginUI.el.vcodeHandler.trigger(Ev.click); result = false; } else if(!checkPassword(accPwd, msgTip, tipInfo)) { LoginUI.el.vcodeHandler.trigger(Ev.click); result = false; } else if(!checkVcode(vcode, msgTip, tipInfo)) { LoginUI.el.vcodeHandler.trigger(Ev.click); result = false; } if(!result) { $(btnLogin).removeClass('login-btn-disabled'); LoginUI.el.accPwd.val(String.Empty); LoginUI.el.vcode.val(String.Empty); return result; } LoginUI.el.accPwd.val(hex_md5(accPwd)); return result; }, success: function(json) { if(AjaxStatus.ok == json.status) { hideTipMessage(LoginUI.el.tipInfo); $('#login_info_area').html(['<p>', json.values.accountName, '，您好！</p> <p>欢迎来到《赛车大亨》！</p>'].join('')) .show(null); $('#login_form_area').hide(null); $('#login_href').bind('click', function() { location.href = 'ServerList.do'; return false; }); } else { LoginUI.el.accPwd.val(String.Empty); LoginUI.el.vcode.val(String.Empty); LoginUI.el.vcodeHandler.trigger(Ev.click); showTipMessage(LoginUI.el.msgTip, LoginUI.el.tipInfo, json.message); $(btnLogin).removeClass('login-btn-disabled'); } } }); }, enterLogin: function(event) { if(event.keyCode == 13) { if(trim(LoginUI.el.accPwd.val()).length > 0 && trim(LoginUI.el.accName.val()).length > 0 && trim(LoginUI.el.vcode.val()).length == 4) { LoginUI.el.btnLogin.trigger(Ev.click); } else { if($(event.target).not(LoginUI.el.accName).length == 0) { LoginUI.el.accPwd.focus(); return; } else if($(event.target).not(LoginUI.el.accPwd).length == 0) { LoginUI.el.vcode.focus(); return; } } } }, assignEvents: function() { this.el.accName.bind('focus.txt', function(event) { if($(this).val() == LoginUI.el.accTip.val()) { $(this).val(String.Empty); } hideTipMessage(LoginUI.el.tipInfo); return false; }).bind('blur.txt', function(event) { if(trim($(this).val()) == String.Empty) { $(this).val(LoginUI.el.accTip.val()); } return false; }).bind('keyup.txt', function(event) { this.value = this.value.replace(/[\s ]/ig, ''); LoginUI.enterLogin(event); return false; }); // 密码输入框绑定事件 this.el.accPwd.bind('focus.password', function(event) { hideTipMessage(LoginUI.el.tipInfo); return false; }).bind('keyup.password', function(event) { this.value = this.value.replace(/[\s ]/ig, ''); LoginUI.enterLogin(event); return false; }); // 验证码输入框绑定事件 this.el.vcode.bind('focus.vcode', function(event) { hideTipMessage(LoginUI.el.tipInfo); return false; }).bind('keyup.vcode', function(event) { this.value = this.value.replace(/[^0-9a-zA-Z]/ig, ''); LoginUI.enterLogin(event); return false; }).bind('blur.vcode', function(event) { if(trim(this.value).length >= 4) { this.value = this.value.replace(/[^0-9a-zA-Z]/ig, ''); this.value = this.value.substring(0, 4); } return false; }); this.el.btnLogin.bind('click.login', function(event) { LoginUI.login(this); return false; }); } }); })(jQuery, window);这个代码主要是用来验证用户输入信息的正确性与否，因为代码中使用了多种样式和效果，这里就不详谈了，通过这样之后就可以实现信息的验证了。其实最主要的还是要想到使用这样的js来进行验证，平常我们做的验证比这个不知简单多少倍，我已开始也没有想到这么周全，在技术总监的提示下进行了多次修改，所以今天收获还是蛮大。提醒自己写代码细节还是要需要注意。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
