1 兼容IE678
2 适合网站开发
html：
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(function () {
//用户名失去焦点
$("#userName").on("keyup blur", function () {
userNameCheck();
});
//密码失去焦点
$("#pwd").on("keyup blur", function () {
pwdCheck();
});
//确认密码失去焦点
$("#pwdConfirm").on("keyup blur", function () {
pwdConfirmCheck();
});
//邮箱失去焦点
$("#email").on("keyup blur", function () {
emailCheck();
});
//提交
$("#reg").click(function () {
if (userNameCheck() == false || pwdCheck() == false || pwdConfirmCheck()==false|| emailCheck()==false)
{
//alert("检查表单");
return;
}
else {
$.ajax({
type: "post",
url: "Submit.aspx",
data: $("form").serialize(),
success: function (response,status,xhr) {
if (response=="success")
{
alert("注册成功!");
window.location = "HtmlPage1.html";
}
else {
alert("注册失败!");
}
},
error: function () {
alert("ajax错误");
}
});
}
});
$(document).ajaxStart(function () {
$("#div1").show();
}).ajaxStop(function () {
$("#div1").hide();
});
});
//验证邮箱格式
function checkEmail(str) {
var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if (re.test(str)) {
return true;
}
else {
return false;
};
};
function userNameCheck() {
var userName = $("#userName").val();
//用户名不能为空
if (userName == "") {
$("#label_UserName").html("<strong style='color:red'>用户名不能为空!</strong>");
//$("#userName")[0].focus();
return false;
}
else {
$.ajax({
type: "post",
url: "Ajax.aspx",
data: $.param({ userName: $("#userName").val() }),
success: function (response, status, xhr) {
if (response == "ok") {
$("#label_UserName").html('<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/aa.png" alt="" />');
return true;
}
else {
$("#label_UserName").html("<strong style='color:red'>用户名已存在!</strong>");
return false;
}
}
});
}
};
function pwdCheck() {
var pwd = $("#pwd").val();
if (pwd == "") {
$("#lable_pwd").html("<strong style='color:red'>密码不能为空!</strong>");
//$("#pwd")[0].focus();
return false;
}
else {
if (pwd.length < 6) {
$("#lable_pwd").html("<strong style='color:red'>密码不能少于6位!</strong>");
return false;
}
else {
$("#lable_pwd").html('<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/aa.png" alt="" />');
return true;
}
}
};
function pwdConfirmCheck() {
var pwdConfirm = $("#pwdConfirm").val();
if (pwdConfirm == "") {
$("#label_pwdConfirm").html('<strong >确认密码不能为空!</strong>');
return false;
}
else {
if ($("#pwdConfirm").val() != $("#pwd").val()) {
$("#label_pwdConfirm").html('<strong >两次输入的密码不一致,请重新输入!</strong>');
return false;
}
else {
$("#label_pwdConfirm").html('<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/aa.png" alt="" />');
return true;
}
}
};
function emailCheck() {
var email = $("#email").val();
if (email == "") {
$("#label_email").html('<strong >邮箱不能为空!</strong>');
return false;
}
else {
if (checkEmail(email) == false) {
$("#label_email").html('<strong >邮箱格式不正确!</strong>');
return false;
}
else {
$("#label_email").html('<img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/aa.png" alt="" />');
return true;
}
}
}
</script>
<style type="text/css">
#div1 {
width: 180px;
height: 140px;
display: none;
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td>用户名:</td>
<td><input type="text" id="userName" name="userName" /><span >*</span><label id="label_UserName"></label></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" id="pwd" name="pwd" /><span >*</span><label id="lable_pwd"></label></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="text" id="pwdConfirm" name="pwdConfirm" /><span >*</span><label id="label_pwdConfirm"></label></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" id="email" name="email" /><span >*</span><label id="label_email"></label></td>
</tr>
<tr>
<td><input id="reg" type="button" value="提交" /></td>
<td></td>
</tr>
</table>
<div id="div1"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../img/loading.gif" alt="" />正在提交,请稍候......</div>
</form>
</body>
</html>
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
