这篇文章将为大家详细讲解有关怎么用JQUERY写注册验证，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
1 兼容IE678
2 适合网站开发
html：
<script src="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 src="../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 src="../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 src="../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 src="../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 src="../img/loading.gif" alt="" />正在提交,请稍候......</div>
</form>
</body>
</html>
关于“怎么用JQUERY写注册验证”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
