【页面效果：说明js没有导入，本内容重点说明代码细节】
一、细节
- <em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。
- closest() 方法返回被选元素的第一个祖先元素。 closest（最近的）
- jquery文本框的focus和blur事件
focus事件在元素获取焦点时触发，如点击文本框时，触发该事件；而blur事件则在元素丢失焦点时触发，如点击除文本框的任何元素，都会触发该事件 -
var ev = document.all ? window.event : e; 这个在js中定义怎么理解呢
这个是用来区别ie 和其他浏览器的一个判断,在ie中，事件传播的时候，生成的事件对象会绑定到全局的window上,而在其他浏览器中，事件对象将会是一个局部变量，传到方法中 var btn = document.getElementById('btn');//一个按钮 btn.onclick = function(event){//给btn绑定一个点击事件 //其他浏览器会在点击发生的时候，把事件对象当作参数传递过来 alert('其他浏览器：' + event); //在ie浏览器中，这个event变量是空，它会在全局的window上 alert('ie浏览器：' + window.event); } 这样在处理的时候，为了统一处理event对象，就需要区别出来ie和别的浏览器 而在ie中的document对象有一个all属性，里面存放了页面中所有的标签 在其他浏览器中是没有这个属性的，所以，可以用document.all来判断是否为ie浏览器 然后进行event处理 var btn = document.getElementById('btn'); btn.onclick = function(event){//给btn绑定一个点击事件 //这里用一个三元表达式来做简单判断，如果存在document.all那么使用window.event //否则就直接用event var ev = document.all ? window.event : event; alert(ev); } //这个写法可以稍微简单一些 btn.onclick = function(event){ //直接用这个判断，如果存在event对象，则直接用他，否则用window.event var ev = event || window.event; alert(ev); }
5、 validate的学习看 jquery validate使用说明【http://asialee.iteye.com/blog/2001239】
二、【注册页面代码】
[#escape x as (x)!?html] <!doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>[#include 'inc_title.html'/]</title> <meta name="keywords" content="${node.keywords}"/> <meta name="description" content="${node.description}"/> <link href="_files/css/common.css" rel="stylesheet"/> <link href="_files/css/content.css" rel="stylesheet"/> <link href="_files/css/global.css" rel="stylesheet"/> <link href="_files/css/style.css" rel="stylesheet"/> [#include 'inc_js.html'/] </head> <body> [#include 'inc_header.html'/] <!--注册--> <div class="register-wrap"> <div id="register"> <div class="rg_tl">注册</div> <!-- <div class="rg_des">注册后即可创建项目，并开始融资</div> --> <form id="validForm" action="${ctx}/register.jspx" method="post" autocomplete="off"> <input type="hidden" name="groupId" value="3"/> <div class="rg_con clearfix"> <div class="rgc_inr"> <div class="labelbox"><span>真实姓名:</span><input type="text" name="realName" id="realName" value="" /><em>请输入你的真实姓名</em></div> <div class="labelbox"><span>账号:</span><input type="text" name="username" id="username" value="" /><em>请输入用户名</em></div> <!-- <div class="labelbox"><span>手机:</span><input type="text" name="password" value="" placeholder="请输入手机号"/></div> --> <div class="labelbox"><span>邮箱:</span><input type="text" name="email" value="" /><em>请输入邮箱</em></div> <div class="labelbox"><span>密码:</span><input type="password" id="password" name="password" value=""/><em>请输入密码</em></div> <div class="labelbox"><span>确认密码:</span><input type="password" id="confirm_password" value=""/><em>请再次输入密码</em></div> <!-- <div class="labelbox"> <span>用户角色</span> <p> <select id="userrole" name="groupId" style="display:none"> <option value="">请选择</option> <option value="3">创客</option> <option value="8">学生</option> </select> <input type="hidden" id="userroleVal" value=""/> </p> </div> --> <!-- <div class="labelbox"> <span>入驻基地:</span> <p> <select id="select-base" style="display:none"> [#if orgList??] [#list orgList as org] [#if (org.recommend)?? && org.recommend==1] <option class="select-base" value="${org.id}">${org.name}</option> [/#if] [/#list] [/#if] </select> <input type="hidden" name="orgIds" id="orgId" value="${orgList[0].id}"/> </p> </div> --> <div class="labelbox"> <span>验证码:</span> <p> <input type="text" id="captcha" name="captcha" data-rule-required="true" data-rule-remote='{"url":"${ctx}/captcha.servlet","type":"post"}' data-msg-remote="验证码错误" autocomplete="off" value=""/><em>请填写验证码</em> <img src="${ctx}/captcha.servlet" onclick="this.src='${ctx}/captcha.servlet?d='+new Date()*1;$('#captcha').focus();" style="cursor:pointer;border:1px solid #ccc;margin: 4px 0 0 7px;vertical-align:top;" title="点击重新获取验证码"/> </p> </div> <div class="labelbox"> <span></span> <!-- <p> <input type="checkbox" id="protocol" checked="checked"/> 我已认证阅读并同意<a href="javascipt:">《高校创业服务平台用户服务协议》</a> </p> --> </div> <div class="labelbox"><input type="submit" value="立即注册" class="button rg_btn"/>已有账号？点击<a href="/login.jspx" class="toLoginPage">登录</a></div> </div> </div> </form> </div> </div> <script type="text/javascript"> $(function(){ $(".rgc_inr input").each(function(){ if($(this).val()==''){ $(this).closest(".labelbox").find("em").css("display","block"); } }) $(".rgc_inr input[type='text'],.rgc_inr input[type='password'],.rgc_inr textarea").bind({ focus: function() { $(this).closest(".labelbox").find("em").css("display","none"); }, blur: function() { if ($.trim($(this).val()) == "") { $(this).closest(".labelbox").find("em").css("display","block"); } } }) .each(function(){ if ($.trim($(this).val()) != "") { $(this).closest(".labelbox").find("em").css("display","none"); } }); $(".rgc_inr em").click(function(){ $(this).css("display","none").closest(".labelbox").find("input[type='text'],input[type='password']").focus(); }) $("#validForm").validate({ rules: { username: "required", realName: "required", email:{ required:true, email:true }, password: { required: true, minlength: 6, maxlength: 20 } }, messages: { username: "用户名不能为空", realName: "真实姓名不能为空", email:{ required:"邮箱不能为空", email:"邮箱格式不正确" }, password:{ required: "请输入密码", minlength: "密码长度不能小于6个字符", maxlength: "密码长度不能超过20个字符" } }, errorPlacement: function (error, element) { //指定错误信息位置 error.insertAfter(element); }, submitHandler:function(form){ var orgId=$("#orgId"), username=$("#username"), realName=$("#realName"), /* userroleVal=$("#userroleVal"), */ /* protocol=$("#protocol"), */ password=$("#password"), confirm_password=$("#confirm_password"); if(confirm_password.val()!==password.val()){ confirm_password.closest(".labelbox").append('<label for="confirm_password" class="error">两次输入密码不一致</label>') return; } /* if(userroleVal&&userroleVal.val()==""){ userroleVal.closest(".labelbox").append('<label for="userrole" class="error">至少选择一个角色</label>') return; } */ if(orgId&&orgId.val()==''){ orgId.closest(".labelbox").append('<label for="orgId" class="error">至少选择一个组织</label>') return; } if(username&&username.val()=="请输入用户名"){ username.closest(".labelbox").append('<label for="username" class="error">用户名不能为空</label>') return; } if(realName&&realName.val()=="请输入用户名"){ realName.closest(".labelbox").append('<label for="realName" class="error">真实姓名</label>') return; } /* if(protocol&&!protocol.is(':checked')) { protocol.closest(".labelbox").append('<label for="protocol" class="error" style="top:-4px;">请勾选用户协议</label>') return; } */ form.submit(); } }); document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev.keyCode==13) { $('#validForm').submit(); } } //注册 $("#register input[type='text'],#register input[type='password']").bind({ focus: function() { if ($(this).val() == $(this)[0].defaultValue) { $(this).val(""); } $(this).closest("label").find("i").css("display","none"); }, blur: function() { if($.trim($(this).val()) == "") { $(this).val($(this)[0].defaultValue); $(this).closest("label").find("i").css("display","block"); } } }) $("#select-base").selectpick({ 415, left:80, top:250, selectValue:'', targetElement:'.rgc_inr', onSelect : function(value, text) {//选择基地下拉菜单回调 $("#orgId").val(value); } }); /* $("#userrole").selectpick({ 100, left:80, top:200, selectValue:${orgList[0].id}, targetElement:'.rgc_inr', onSelect : function(value, text) {//选择用户角色 $("#userrole,#userroleVal").val(value); } }); */ }) </script> [#include 'inc_footer.html'/] </body> </html> [/#escape]