? ? ? ? 各位老師、同學，我想問一下，我的這個注冊的用戶名輸入框這里，想做出和我們站的注冊的用戶名輸入框一樣的效果，怎么做不出來呢？? ? ? ? 就是怎樣才能做到和我們網站首頁的注冊－用戶名－輸入框一樣，即有驗證效果，又當用戶輸入為郵箱地址的時候，彈出密碼框。而當用戶輸入不是郵箱地址的時候，隱藏密碼框呢？? ? ? ?還有這個到底jQuery實現的，還是PHP實現的呢？<!DOCTYPE html><html><head>? ? <meta charset="UTF-8">? ? <title>練習</title>? ? <style>.login_wrapper {position: fixed;left: 0;top: 0;bottom:0;right: 0;z-index: 100;background-color: #000;opacity: 0.75;}.login {position: fixed;left: 37%;top: 10%;z-index: 200;background-color: #fff;width: 360px;margin: 0;padding: 0;}.login_header h2 {border-bottom: 2px solid #C5C5D1;width:320px;margin:0 auto;color:#919292;height: 49px;line-height: 49px;}.login_header span {float: left;width: 80px;cursor: pointer;}.login_header span:hover {color: #018EFD;border-bottom: 2px solid #018EFD;}.cl_js {color: #018EFD;border-bottom: 2px solid #018EFD;}.login_close { position: absolute; top: 12px; right: 20px; width: 17px; height: 17px; background-color:#fff;?? ? ? ? ? ? ? ? background-image:url(../images/close-1.png); background-repeat:no-repeat; outline: none;}.login_close:hover { position: absolute; top: 9px; right: 17px; width: 23px; height: 23px; background-color:#fff;?? ? ? ? ? ? ? ? background-image:url(../images/close-m.png); background-repeat:no-repeat; outline: none;}.login_body {width: 300px;margin: 0 auto;}.login_body #login_p1 {font-size: 12px;text-align: left;color: red;width: 300px;height: 30px;line-height: 30px;}.login_body p {font-size: 12px;text-align: left;color: red;width: 300px;height: 20px;line-height: 20px;clear: both;}.login_in {width: 279px;height: 20px;line-height: 20px;padding: 9px 9px 9px 10px;border: 1px solid #C5C5D1;}.login_yn {width: 120px;height: 20px;line-height: 20px;padding: 9px;border: 1px solid #C5C5D1;float: left;}.login_ch {float: left;font-size: 13px;width: 107px;height: 14px;line-height: 14px; margin-bottom: 20px;}.login_w {float: right;font-size: 13px;}.login_s {width: 300px;height: 50px;font-size: 25px;background-color: #7DBDEF;color: #fff;outline: none;cursor: pointer;}.login_foot {width: 300px;height: 25px;line-height:25px;margin: 26px 30px 34px 30px;}.login_foot span { float: left; font: 14px "微軟雅黑"; margin-top: 3px; color: #7E7F7F; }.login_foot a {float: right;margin: 0 8px;}.js_login_wrapper {}.register_p {display: none;}? ? </style></head><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script src="jquery-validation-1.15.0/dist/jquery.validate.js"></script><script>? ? $(document).ready(function(){? ? var js_login_wrapper=$(".js_login_wrapper");? ? var js_login=$(".js_login");? ? var register=$(".register");? ? var lg=$("#login_btn");? ? var re=$("#register_btn");? ? $("#login").click(function() {? ? ? ? js_login_wrapper.show();? ? ? ? js_login.show();? ? ? ? register.hide();? ? ? ? lg.addClass('cl_js');? ? ? ? re.removeClass('cl_js');? ? });? ? $("#register").click(function() {? ? ? ? js_login_wrapper.show();? ? ? ? js_login.hide();? ? ? ? register.show();? ? ? ? re.addClass('cl_js');? ? ? ? lg.removeClass('cl_js');? ? });? ? lg.bind('click', function() {? ? ? ? js_login.show();? ? ? ? register.hide();? ? ? ? $(this).addClass('cl_js');? ? ? ? re.removeClass('cl_js');? ? });? ? re.bind('click', function() {? ? ? ? register.show();? ? ? ? js_login.hide();? ? ? ? $(this).addClass('cl_js');? ? ? ? lg.removeClass('cl_js');? ? });? ? $("#close_btn").click(function() {? ? ? ? js_login_wrapper.hide();? ? });? ? login_va("#login_f");? ? login_va("#register_f");? ??});//驗證登錄表單function login_va(obj) {? ? $(obj).validate({? ? ? ? debug:true,? ? ? ? rules:{? ? ? ? ? ? username:{? ? ? ? ? ? ? ? remote:"../js/remote.json",? ? ? ? ? ? ? ? isMobile:true,? ? ? ? ? ? },? ? ? ? ? ? password:{? ? ? ? ? ? ? ? minlength:6,? ? ? ? ? ? ? ? maxlength:16,? ? ? ? ? ? },? ? ? ? ? ? validate:{? ? ? ? ? ? ? ? remote:"../js/remote.json",? ? ? ? ? ? ? ? required:true,? ? ? ? ? ? },? ? ? ? },? ? ? ? messages:{? ? ? ? ? ? username:{? ? ? ? ? ? ? ? remote:"用戶不存在",? ? ? ? ? ? },? ? ? ? ? ? password:{? ? ? ? ? ? ? ? minlength:"6-16位密碼,區分大小寫,不能用空格",? ? ? ? ? ? ? ? maxlength:"6-16位密碼,區分大小寫,不能用空格",? ? ? ? ? ? },? ? ? ? ? ? validate:{? ? ? ? ? ? ? ? required:"請輸入正確驗證碼"? ? ? ? ? ? },? ? ? ? },? ? errorElement:"p",? ? });?$.validator.addMethod("isMobile", function(value, element) { ?? ? var length = value.length;? ? var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;? ? var email=/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;? ? return this.optional(element) || (length == 11 && mobile.test(value)) ||? ? ? ? ? ?(email.test(value) && $("#register_password").show() && $(".register_p").show()) ||? ? ? ? ? ?//? ? ? ? ? ?// ? 各位老師、同學，我想問一下，我的這個部分，注冊的用戶名輸入框這里，想做出和我們站的注冊的用戶名輸入框一樣的效果，怎么做不出來呢？? ? ? ? ? ?//? ? ? ? ? ?//? ? ? ? ? ?// ?就是下面的這行代碼，如果把它要著，上面的用戶名輸入框就沒有了驗證效果，但是當用戶名輸入框輸入的不為郵箱地址的時候，密碼框是可以隱藏的。? ? ? ? ? ?// ?如果把它注釋掉，上面的用戶名輸入框有驗證效果，但是當用戶名輸入框輸入的不為郵箱地址的時候，密碼框又不能隱藏了。? ? ? ? ? ?// ?想問一下，怎么才能做到和我們網站首頁的注冊用戶名輸入框一樣，即有驗證效果，又當用戶輸入為郵箱地址的時候，彈出密碼框。而當用戶輸入不是郵箱地址的時候，隱藏密碼框呢？? ? ? ? ? ? ? ? ?還有這個到底jQuery實現的，還是PHP實現的呢？? ? ? ? ? ?(!email.test(value) && $("#register_password").hide() && $(".register_p").hide());},"請輸入正確的郵箱或手機號");}</script><body>? ? <div>? ? ? <div></div>? ? ? <div>? ? ? ? <div>? ? ? ? ? ? <h2>? ? ? ? ? ? ? ? <span id="login_btn">登錄</span>? ? ? ? ? ? ? ? <span id="register_btn">注冊</span>? ? ? ? ? ? </h2>? ? ? ? ? ? <button type="button" id="close_btn" data-dismiss="modal" aria-hidden="true"></button>? ? ? ? </div>? ? ? ? <div >? ? ? ? ? ? <div>? ? ? ? ? ? ? ? <form id="login_f" action="">? ? ? ? ? ? ? ? ? ? <p id="login_p1"></p>? ? ? ? ? ? ? ? ? ? ? ? <input type="text" value="" placeholder="請輸入登錄郵箱/手機號" name="username" id="login_username">? ? ? ? ? ? ? ? ? ? <p></p>? ? ? ? ? ? ? ? ? ? ? ? <input type="password" value="" placeholder="6-16位密碼,區分大小寫,不能用空格" name="password">? ? ? ? ? ? ? ? ? ? <p></p>? ? ? ? ? ? ? ? ? ? ? ? <input type="text" value="" placeholder="請輸入驗證碼" name="validate">? ? ? ? ? ? ? ? ? ? <p></p>? ? ? ? ? ? ? ? ? ? <label for="auto-signin">? ? ? ? ? ? ? ? ? ? ? ? <input type="checkbox" checked="checked" id="auto-signin">? ? ? ? ? ? ? ? ? ? ? ? 下次自動登錄? ? ? ? ? ? ? ? ? ? </label>? ? ? ? ? ? ? ? ? ? <a href="">忘記密碼</a>? ? ? ? ? ? ? ? ? ? <input type="submit" name="login" value="登錄">? ? ? ? ? ? ? ? </form>? ? ? ? ? ? </div>? ? ? ? ? ? <div>? ? ? ? ? ? ? ? <form id="register_f" action="">? ? ? ? ? ? ? ? ? ? <p></p>? ? ? ? ? ? ? ? ? ? <input type="text" value="" placeholder="請輸入注冊郵箱/手機號" name="username" id="register_username">? ? ? ? ? ? ? ? ? ? <p"></p>? ? ? ? ? ? ? ? ? ? <input type="password" value="" placeholder="6-16位密碼,區分大小寫,不能用空格" name="password" id="register_password" style="display: none;">? ? ? ? ? ? ? ? ? ? <p></p>? ? ? ? ? ? ? ? ? ? <input type="text" value="" placeholder="請輸入驗證碼" name="validate">? ? ? ? ? ? ? ? ? ? <p></p>? ? ? ? ? ? ? ? ? ? <input type="submit" value="注冊">? ? ? ? ? ? ? ? </form>? ? ? ? ? ? </div>? ? ? ? </div>? ? ? ? <div>? ? ? ? ? ? <span>其它方式登錄</span>? ? ? ? ? ? <a href=""><img src="images/login_foot-r.png" alt=""></a>? ? ? ? ? ? <a href=""><img src="images/login_foot-x.png" alt=""></a>? ? ? ? ? ? <a href=""><img src="images/login_foot-w.png" alt=""></a>? ? ? ? ? ? <a href=""><img src="images/login_foot-QQ.png" alt=""></a>? ? ? ? </div>? ? ? </div>? </div></body></html>
我想做一個和我們站（慕課網）注冊頁用戶名－輸入框一樣的驗證效果，為什么做不出來呢？
未來99
2017-03-06 13:29:12
