注册页面

【页面效果:说明js没有导入,本内容重点说明代码细节】

 

一、细节

  1.  <em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说,这意味着要把这段文字用斜体来显示。
  2.   closest() 方法返回被选元素的第一个祖先元素。  closest(最近的)
  3.   jquery文本框的focus和blur事件 
      focus事件在元素获取焦点时触发,如点击文本框时,触发该事件;而blur事件则在元素丢失焦点时触发,如点击除文本框的任何元素,都会触发该事件
  4.  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({
                width:415,
                left:80,
                top:250,
                selectValue:'',
                targetElement:'.rgc_inr',
                onSelect : function(value, text) {//选择基地下拉菜单回调
                    $("#orgId").val(value);
                }
            });
            
            /* $("#userrole").selectpick({
                width: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]

 

posted @ 2016-09-08 17:41  涤新云  阅读(425)  评论(0编辑  收藏  举报