校验用户名是否在数据库中存在
向服务器发起异步请求
<script>
//检验用户名
function checkusername(async) {
$.ajax默认是异步请求,当用户名框失去焦点后进行异步提交名字
这里设置async参数是为了一会提交表单进行校验时改为同步,有返回值
var username= $("#username").val();
var flag;
if(username!=null&&username.length!=0){
$.ajax({
url:"CheckUsernameServlet",//
async:async,//默认异步
data:"username="+username,
type:"post",
dataType:"json",
success:function (data) {
if(data.code==0){
$("#usermsg").text(data.msg).css("color","green")
flag= true;
}else{
$("#username").css("border","1px solid red");
$("#usermsg").text(data.msg).css("color","red")
flag= false;
}
},
error:function () {
alert("服务器发生了错误")
}
});
}
else{
$("#usermsg").text("请输入账号").css("color","red")
falg= false;
}
return flag;
}
</script>
检验密码是否超过6位数
<script>
//检验密码
function checkPassword() {
var password = $("#password").val();
//定义正则
var reg = /^\w{6,20}$/;
//校验
var flag = reg.test(password);
if (flag){
//验证成功
$("#password").css("border","");
$("#passwordmsg").text("")
}else {
//验证失败
$("#password").css("border","1px solid red");
$("#passwordmsg").text("密码长度不能小于6").css("color","red");
}
return flag;
}
检验邮箱格式
<script>
//检验邮箱
function checkEmail(){
var email = $("#email").val();
//定义正则校验邮箱
var reg = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
var flag = reg.test(email);
if (flag){
//验证成功
$("#email").css("border","");
$("#emailmsg").text("");
}else {
//验证失败
$("#email").css("border","1px solid red");
$("#emailmsg").text("邮箱格式不正确").css("color","red")
}
return flag;
}
</script>
表单验证
<script type="text/javascript">
$(function () {
$("#username").on("blur",checkusername)//当username框失去焦点,执行checkusername
$("#password").on("blur",checkPassword)
$("#checkpassword").on("blur",checkpassword2)
$("#email").blur(checkEmail)//一样的方法,失去焦点
$("#registerform").submit(function () {
用&&后检查只要一个不成立就不执行了,用&可以把所有检查做完,checkusername改成同步才能有返回值,不然if表达式用于通不过
if(checkEmail()&checkpassword2()&checkPassword()&checkusername(false)){
$.ajax({
url:"${pageContext.request.contextPath}/RegisterServlet",
async:true,
data:$("#registerform").serialize(),
type:"post",
dataType:"json",
success:function (data) {
if(data.code==0){//注册成功
$("#msg").text(data.msg).css("color","green")
}
else {
$("#msg").text(data.msg).css("color","red")
}
},
error:function () {
}
});
}
})
})
</script>
form表单
<form id="registerform" method="post" action=${pageContext.request.contextPath}/RegisterServlet onsubmit="return false">
账号:<input type="text" name="username" id="username"><div id="usermsg" ></div>
密码:<input id="password" type="password" name="password"><div id="passwordmsg" ></div>
确认密码:<input id="checkpassword" type="password" name="checkpassword"><div id="checkpasswordmsg"></div>
邮箱: <input id="email" type="email" name="email" ><div id="emailmsg"></div>
<input id="submit" type="submit" value="注册">
<input type="button" value="返回" onclick=window.location.href="${pageContext.request.contextPath}/index.jsp">
<div id="msg"></div>
</form>