jQuery.getJSON(url,data,success(data,status,xhr))
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/simple-cube.min.css">
<script type="text/javascript" src="js/jQuery2.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1470660549_793297.css">
<style type="text/css">
.icon-chacha,
.icon-gou {
font-family: 'iconfont';
color: #FF0613;
font-size: 25px;
font-style: normal;
line-height: 1;
}
.icon-gou {
color: #42A70C;
}
.icon-shouji,
.icon-mima {
font-family: 'iconfont';
color: #656565;
font-size: 16px;
font-style: normal;
line-height: 30px;
position: absolute;
left: 10px;
top: 2px;
}
body {
background: -webkit-linear-gradient(bottom, #A5A5A5 0%, #fff 100%);
}
.top {
width: 680px;
/*这里不要求，但是由益处的风险，不是响应式 换行的，这个要明确 */
margin: 20px auto 30px auto;
}
.top i {
display: inline-block;
width: 329px;
height: 37px;
/*这个，只有笃定这个背景正好等于in设置的宽高的时候才不加no-repeat*/
background: url(imgs/logo-new.png);
background-size: 100% 100%;
}
.top a,
body .top .account {
font-size: 14px;
}
.form-wrap {
background: #fff;
width: 680px;
margin: 0 auto;
border-top: 2px #ff0000 solid;
box-shadow: 1px 1px 1px #717171, -1px 0 1px #717171;
padding-bottom: 50px;
}
.form-wrap i {
display: block;
width: 560px;
height: 30px;
background: url(imgs/reg-bar1.gif);
background-size: 100% 100%;
margin: 0 auto 50px auto;
}
.form-wrap h3 {
margin: 30px 0 20px 40px;
font-size: 28px;
}
fieldset {
border: none;
/*border: 1px red solid;*/
margin: 0 0 25px 80px;
font-size: 0;
position: relative;
}
fieldset:nth-child(6) {
/*margin-left: 70px;*/
font-size: 0;
}
fieldset input {
height: 36px;
width: 340px;
padding: 0 2em;
box-sizing: border-box;
font-size: 14px;
margin-right: 1em;
}
fieldset input[type~="checkbox"] {
width: 14px;
height: 14px;
margin-right: 0;
}
fieldset p {
font-size: 14px;
}
input[type="submit"],
input[type="button"] {
width: 130px;
background-color: #BFBFBF;
color: #fff;
text-align: center;
border: none;
outline: none;
border-radius: 5px;
}
.footer-wrap {
background: #fff;
color: #C0C0C0;
text-align: center;
margin-top: 50px;
padding-top: 30px;
}
fieldset .codeW {
display: none;
}
fieldset .agreement a:hover {
color: #ff0000;
}
.agreement .is-agreement {
display: none;
}
</style>
</head>
<body>
<div class="top justify">
<i class="dib"></i>
<p class="dib account" id="account">已有账户？<a href="javascript:">立即登入</a></p>
</div>
<div class="form-wrap">
<h3>免费注册</h3>
<i></i>
<form>
<fieldset>
<label class="icon-shouji" for="phone"></label>
<input type="text" name="phone" placeholder="手机号" id="phone" maxlength="11">
<p class="dib" id="phoneW"><span id="icon_1"></span><span>请输入11有效手机号码</span></p>
</fieldset>
<fieldset>
<label class="icon-shouji" for="code"></label>
<input type="text" name="code" placeholder="四位验证码" id="code" maxlength="4">
<p class="dib codeW" id="codeW"><span id="icon_2"></span><span>验证码不正确</span></p>
<input type="button" name="codebtn" value="获取验证码" id="codebtn">
</fieldset>
<fieldset>
<label class="icon-mima" for="password"></label>
<input type="password" name="password" placeholder="密码" id="password" maxlength="16">
<p class="dib" id="passwordW"><span id="icon_3"></span><span>6-16位字母和字母组成</span></p>
</fieldset>
<fieldset>
<label class="icon-mima" for="rePassword"></label>
<input type="password" name="rePassword" placeholder="确认密码" id="rePassword">
<p class="dib" id="rePasswordW"><span id="icon_4"></span><span>再次输入密码</span></p>
</fieldset>
<fieldset>
<input type="checkbox" id="checked" checked />
<label for="checked" class="agreement">
<p class="dib">我已阅读并同意<a href="javascript:">《微策略网站服务协议》</a><span class="is-agreement" id="isAgreement">是否阅读并同意协议</span></p>
</label>
</fieldset>
<fieldset>
<input type="submit" value="下一步" id="sub">
</fieldset>
</form>
</div>
<div class="footer-wrap">
<p>© 2013-2014 微策略 All rights reserved 臣乾金融信息服务（上海）有限公司 沪ICP备14012497号</p>
</div>
<script type="text/javascript" src="js/jQuery2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var btn = $("input[name='codebtn']"),
phone = $("input[name='phone']"),
code = $("input[name='code']"),
password = $("input[name='password']"),
rePassword = $("input[name='rePassword']"),
icon_1 = $("#icon_1"),
icon_2 = $("#icon_2"),
icon_3 = $("#icon_3"),
icon_4 = $("#icon_4");
// 错误时给叉叉和焦点的方法
function error(obj, _obj) {
obj.attr("class", "icon-chacha").next().show();
_obj.css("outline-color", "#ff0000").focus();
}
// 通过jquery限制输入数字
function onlyInputNun(obj) {
obj.on("input propertychange", function() {
$(this).val($(this).val().trim());
if (isNaN(obj.val())) {
obj.val("");
}
});
}
onlyInputNun(phone);
// 验证手机号的方法
function checkPhone() {
phone.change(function() {
if (/^1\d{10}$/.test(phone.val())) {
icon_1.attr("class", "icon-gou").next().hide();
btn.css("background-color", "#ff0000");
} else {
error(icon_1, phone);
btn.css("background-color", "#BFBFBF");
}
})
}
checkPhone();
// 点击按钮时提交数据的方法
function getVCode() {
btn.click(function() {
if ($(this).css("background-color") == "#ff0000") {
$.getJSON("192.168.0.1", "phone=" + phone.val() + "&callback=", function(data) {}).fail(function() {});
}
});
}
getVCode();
// 监听code值的变化,发请求
function codeChange() {
code.change(function() {
if (code.val().length < 4 && code.val().length >= 0) {
icon_2.parent().show();
error(icon_2, code);
} else if (code.val().length == 4) {
$.getJSON("192.168.0.1", "phone=" + phone.val() + "&code=" + code.val() + "&callback", function(data) {
if (data.result == "success") {
icon_2.attr("class", "icon-gou").next().hide();
} else {
icon_2.parent().show();
error(icon_2, code);
}
})
.fail(function() {});
}
});
}
codeChange();
// 监听password值的变化
function passwordChange() {
password.change(function() {
if (password.val().length < 6 && password.val().length >= 0) {
error(icon_3, password);
} else {
icon_3.attr("class", "icon-gou").next().hide();
}
})
}
passwordChange();
// 监听repassword
function repassword() {
rePassword.change(function() {
if (password.val() !== rePassword.val()) {
error(icon_4, rePassword);
} else {
icon_4.attr("class", "icon-gou").next().hide();
}
})
}
repassword();
$("#sub").click(function(event) {
event.preventDefault();
var _phone = icon_1.attr("class"),
_code = icon_2.attr("class"),
_password = icon_3.attr("class"),
_rePassword = icon_4.attr("class"),
_checkbox = $("#checked").is(":checked");
console.log(_checkbox);
if ((_phone && _code && _rePassword && _password) === "icon-gou") {
$.getJSON("192.168.0.1", "phone=" + phone.val() + "&code=" + code.val() + "&password=" + password.val() + "&callback=", function(data) {}).fail(function() {});
};
if (icon_3.attr("class") != "icon-gou") {
error(icon_4, rePassword);
};
if (icon_3.attr("class") != "icon-gou") {
error(icon_3, password);
};
if (icon_2.attr("class") != "icon-gou") {
icon_2.parent().show();
error(icon_2, code);
};
if (icon_1.attr("class") != "icon-gou") {
error(icon_1, phone);
};
})
})
</script>
</body>
</html>
427
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
