我想做一个和我们站（慕课网）注册页用户名－输入框一样的验证效果，为什么做不出来呢？
各位老师、同学，我想问一下，我的这个注册的用户名输入框这里，想做出和我们站的注册的用户名输入框一样的效果，怎么做不出来呢？
就是怎样才能做到和我们网站首页的注册－用户名－输入框一样，即有验证效果，又当用户输入为邮箱地址的时候，弹出密码框。而当用户输入不是邮箱地址的时候，隐藏密码框呢？
还有这个到底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>
未来993回答
-
ruibin
你代码太多了，问问题最关键的是提炼问题点，没有人有义务看一长串代码的~ -
未来99
哦，好吧
随时随地看视频慕课网APP
JavaScript
JQuery
PHP