dengzhiguo 7 年之前
父節點
當前提交
4c5b78aa7e
共有 3 個文件被更改,包括 231 次插入23 次删除
  1. 6 3
      src/css/registered.css
  2. 207 5
      src/js/registered.js
  3. 18 15
      template/registered.html

+ 6 - 3
src/css/registered.css

@@ -24,11 +24,12 @@ ul,ol{padding: 0;margin: 0;list-style: none;}
     background-image:url(../../img/zhucebg5.jpg);}
 .clear_first{width:100%;height:1px;}
 .zhuce{width:775px;height:505px;margin:0 auto;margin-top:80px;
-    background: #fff; }
+    background: #fff; position: relative;}
 .title{width:100%;height:50px;font-size: 2rem;color:#5C5C5D;
 line-height:50px;padding-left:50px;}
 
-.regist{width:350px;height:450px;padding-left:50px;display: inline-block;}
+.regist{width:350px;height:450px;padding-left:50px;display: inline-block;
+    position: absolute;top:50px;left:0;}
 .zhuce_input{width:255px;height:40px;border:1px solid #E5E5E5;
 margin-bottom:10px;line-height:38px;}
 .zhuce_input>input{border:none;}
@@ -50,13 +51,15 @@ input{border:none;padding-left:10px;}
     margin-bottom:10px;line-height:38px;}
 .linkmanName{width:255px;height:40px;border:1px solid #E5E5E5;
     margin-bottom:10px;line-height:38px;}
+.zhuangjiaName{width:255px;height:40px;border:1px solid #E5E5E5;
+    margin-bottom:10px;line-height:38px;display:none;}
 .submit{width:255px;height:40px;border:1px solid #E5E5E5;
     margin-bottom:10px;line-height:38px;}
 .submit>input{width:100%;height:100%;background-color: #F18101;color:#fff;
 font-size: 1.8rem;font-weight: bold;letter-spacing:20px;}
 
 .picture{width:420px;height:420px;border-left:1px solid #E5E5E5;
-    display: inline-block;position: relative;}
+    display: inline-block;position: absolute;top:50px;left:350px;}
 .denglu{width:400px;height:20px;text-align: right;display: inline-block;
 position: absolute;top:0;left:0;}
 .denglu>a{color:#F18101;}

+ 207 - 5
src/js/registered.js

@@ -4,16 +4,218 @@
 //import '../css/registered.css';
 //import './public.js'
 (function(){
+    //选择专家和企业时要切换
+    var panduan;
     $("#zhuangjia").click(function(){
-        console.log(1);
-        var a=$("#zhuangjia").val();
-        console.log(a);
+        panduan=$("#zhuangjia").val();
+        if(panduan==0){
+            $(".businessName").css("display","block");
+            $(".linkmanName").css("display","block");
+            $(".zhuangjiaName").css("display","none");
 
+        }
     });
     $("#qiye").click(function(){
-        console.log(2);
-
+        panduan=$("#qiye").val();
+        if(panduan==1){
+            $(".businessName").css("display","none");
+            $(".linkmanName").css("display","none");
+            $(".zhuangjiaName").css("display","block");
+        }
+    });
+    //修改单选框的样式
+    $('#checks').attr('checked',false)
+    $('.login_check label input').click(function(){
+        var Cheack=$(this).prop('checked')
+        if(Cheack){
+            $(this).parent().css({"background":"url(../imgeck_lo.png) no-repeat center left","background-size":"25% 40%"})
+        }else{
+            $(this).parent().css({"background":"url(../imgeck_lono.png) no-repeat center left","background-size":"25% 40%"})
+        }
     });
+    //表单验证
+    $('.sub').attr('disabled', true)
+    $('.sub').css({background: '#CCCCCC',border: 'none'})
+    var pattern = /^1[3|4|5|7|8][0-9]{9}$/;//手机验证正则
+    var pass_pattern=/^\w{6,12}$/;	//密码验证正则
+    $('#username,#userpassword,#piccode,#photo_num,#business,#linkman,#man').keyup(function() {
+        $('.sub').attr('disabled', true)
+        $('.sub').css({background: '#CCCCCC',border: 'none'})
+        var pp = $('#username').val();//手机号码
+        var mim = $('#userpassword').val();//密码
+        var toname = $('#business').val();//企业名称
+        var lxr = $('#linkman').val();//企业联系人
+        var zj=$('#man').val();//联系人
+        var yzm = $('#piccode').val();//验证码
+        var sjyzm = $('#photo_num').val();//手机验证码
+        var typel = $('#zhuangjia').prop("checked") ? '1' : '0';
+        if(typel==1){
+            if(pp!==''&&toname!==''&&lxr!==''&&mim!==''&& pass_pattern.test(mim) && sjyzm!==''&& yzm!==''&&pattern.test(pp)){
+                $('.sub').attr('disabled', false);
+                $('.sub').css({background: '#F18101',border: 'none'})
+            }
+        }
+        if(typel==0){
+            if(pp!==''&&zj!==''&&mim!==''&& pass_pattern.test(mim) && sjyzm!==''&& yzm!==''&&pattern.test(pp)){
+                $('.sub').attr('disabled', false);
+                $('.sub').css({background: '#F18101',border: 'none'})
+            }
+        }
+    })
+    //密码
+    function pass1(){
+        $('#userpassword').blur(function () {
+            var pass1 = $(this).val();
+            if (pass1=='') {
+                $(this).val('');
+                $(this).attr('placeholder', '请输入6-12位数密码');
+            } else if (!pass_pattern.test(pass1)) {
+                $(this).val('');
+                $(this).attr('placeholder', '格式:字母、数字、下划线');
+            }
+        });
+    }
+    pass1();
+    //密码相同
+    pass2();
+    function pass2(){
+        //密码相同验证			
+        $('#userpassword2').blur(function () {
+            var orepeat = $(this).val();
+            var passw = $('#userpassword').val();
+            if (passw !== orepeat) {
+                $(this).val('');
+                $(this).attr('placeholder', '两次密码不相同')
+            } else if (passw == '') {
+                $(this).val('');
+                $(this).attr('placeholder', '请再次输入密码')
+            }
+        });
+
+        $('#userpassword').blur(function () {
+            var tt=$(userpassword2).val();
+            var kk=$(this).val();
+            if ($(this).val() == '') {
+                $('#userpassword2').attr('placeholder', '请再次输入密码')
+            }else if(tt!==kk){
+                $('#userpassword2').val('');
+                $('#userpassword2').attr('placeholder', '两次密码不相同')
+            }
+        })
+    }
+    //手机号码
+    function photo1(){
+        var pho_pattern=/^1[3|4|5|7|8][0-9]{9}$/;
+        $('#username').blur(function () {
+            var pho = $(this).val();
+            if (pho=='') {
+                $(this).val('');
+                $(this).attr('placeholder', '请输入您的手机号码');
+            } else if (!pho_pattern.test(pho)) {
+                $(this).val('');
+                $(this).attr('placeholder', '请输入正确的手机号码');
+            }
+        })
+    }
+    photo1();
+    //手机号码验证
+    function photo_num(){
+        $('#photo_num').blur(function () {
+            var phoa = $(this).val();
+            if (phoa=='') {
+                $(this).val('');
+                $(this).attr('placeholder', '请输入手机上的验证码');
+            }
+        })
+    }
+    photo_num();
+    //单位名称
+    function photo_name(){
+        $('#business').blur(function () {
+            var name = $(this).val();
+            if (name=='') {
+                $(this).val('');
+                $(this).attr('placeholder', '请填写工商局注册的全称');
+            }
+        })
+    }
+    photo_name();
+    //联系人名称
+    function lxr_name(){
+        $('#linkman').blur(function () {
+            var name = $(this).val();
+            if (name=='') {
+                $(this).val('');
+                $(this).attr('placeholder', '请填写单位联系人的姓名');
+            }
+        })
+    }
+    lxr_name();
+    //专家名称
+    function zj_name(){
+        $('#man').blur(function () {
+            var name = $(this).val();
+            if (name=='') {
+                $(this).val('');
+                $(this).attr('placeholder', '请填写您的姓名');
+            }
+        })
+    }
+    zj_name();
+    //手机号码验证
+    //$('#username').blur(function() {
+    //    var kk = $(this).val();
+    //    if (pattern.test(kk) && kk !=='') {
+    //        $('.sub').attr('disabled', false);
+    //        $('.sub').css({
+    //            background: '#428bca',
+    //            border: '1px solid #428bca'
+    //        })
+    //    } else {
+    //        $('.sub').attr('disabled', true)
+    //        $('.sub').css({
+    //            background: '#CCCCCC',
+    //            border: 'none'
+    //        })
+    //    };
+    //
+    //});
+    //表单提交
+    $("form").submit(function(e) {
+        var user = $("#username").val();
+        var password = $("#userpassword").val();
+        var types = $('#zhuangjia').prop("checked") ? '1' : '0';//团体/个人
+        var oname = $('#business').val();//企业名称
+        var opeople = $('#linkman').val();//联系人
+        var Code = $("#piccode").val();
+        var mobileCode = $('#photo_num').val();//手机验证码
+        e.preventDefault();
+        console.log(user, password, types, oname, opeople, Code, mobileCode);
+        $.ajax({
+            type: "POST",
+            dataType: "json",
+            url: globalConfig.context + "/register",
+            data: {
+                "mobile": user,
+                "password": password,
+                "type": types,
+                "companyName": oname,
+                "contacts": opeople,
+                "verficationCode":Code,
+                "mobileCode": mobileCode
+            },
+            success: function (data) {
+                if (data.error && data.error.length) {
+                    $('.msg span').html(data.error[0].message);
+                    console.log(data.error[0].message);
+                } else {
+                    console.log(data);
+                    $('.msg span').html("恭喜注册成功!")
+                    return true;
+                }
+            }
+        })
+    })
 })();
 
 

+ 18 - 15
template/registered.html

@@ -9,10 +9,10 @@
 	<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
     <title>登陆/注册</title>
-    <!--<link rel="stylesheet" href="../src/css/bootstrap.css" />-->
-    <!--<link rel="stylesheet" href="../src/css/public.css" />-->
-    <!--<link rel="stylesheet" type="text/css" href="../src/css/index_home.css"/>-->
-	<!--<link rel="stylesheet" href="../src/css/registered.css"/>-->
+    <link rel="stylesheet" href="../src/css/bootstrap.css" />
+    <link rel="stylesheet" href="../src/css/public.css" />
+    <link rel="stylesheet" type="text/css" href="../src/css/index_home.css"/>
+	<link rel="stylesheet" href="../src/css/registered.css"/>
 </head>
 <body>  	
   	<header>
@@ -102,30 +102,30 @@
 					<div class="regist">
 						<div class="zhuce_input">
 							<img src="../img/name.jpg" alt=""/>
-							<input type="text" name="userName" placeholder="用户名/邮箱/手机"  />
+							<input type="text" name="userName" placeholder="用户名/邮箱/手机"  id="username"/>
 						</div>
 						<div class="zhuce_input">
 							<img src="../img/pass2.jpg" alt=""/>
-							<input type="password" name="userPassword" placeholder="请输入密码" />
+							<input type="password" name="userPassword" placeholder="请输入密码" id="userpassword"/>
 						</div>
 						<div class="zhuce_input">
 							<img src="../img/pass2.jpg" alt=""/>
-							<input type="password" name="userPassword2" placeholder="确认密码" />
+							<input type="password" name="userPassword2" placeholder="确认密码" id="userpassword2"/>
 						</div>
 						<div class="yanzheng">
 							<div class="yanzhengma">
-								<input type="text" name="picCode" placeholder="验证码"/>
+								<input type="text" name="picCode" placeholder="验证码" id="piccode"/>
 							</div>
 							<div class="yanzhengma_cont"></div>
 						</div>
 						<div class="cellcode">
 							<div>
-								<input type="text" name="cellCode" placeholder="手机验证码"/>
+								<input type="text" name="cellCode" placeholder="手机验证码" id="photo_num"/>
 							</div>
 							<a href="#">获取验证码</a>
 						</div>
 						<div class="leibie">
-							<input type="radio" name="leibie" id="zhuangjia" value="0"/>
+							<input type="radio" name="leibie" id="zhuangjia" value="0" checked/>
 							<label for="zhuangjia">我是专家</label>
 						</div>
 						<div class="leibie">
@@ -138,8 +138,11 @@
 						<div class="linkmanName">
 							<input type="text" name="linkmanName" placeholder="单位联系人姓名" id="linkman"/>
 						</div>
+						<div class="zhuangjiaName">
+							<input type="text" name="manName" placeholder="您的姓名" id="man"/>
+						</div>
 						<div class="submit">
-							<input type="submit"/>
+							<input type="submit" class="sub"/>
 						</div>
 					</div>
 					<div class="picture">
@@ -207,9 +210,9 @@
 
 	</div>
 </body>
-<!--<script type="text/javascript" src="../src/js/jquery-2.1.0.js"></script>-->
-<!--&lt;!&ndash;<script type="text/javascript" src="../src/js/index.js"></script>&ndash;&gt;-->
-<!--<script type="text/javascript" src="../src/js/public.js"></script>-->
-<!--<script type="text/javascript" src="../src/js/registered.js"></script>-->
+<script type="text/javascript" src="../src/js/jquery-2.1.0.js"></script>
+<!--<script type="text/javascript" src="../src/js/index.js"></script>-->
+<script type="text/javascript" src="../src/js/public.js"></script>
+<script type="text/javascript" src="../src/js/registered.js"></script>
 
 </html>