Jquery实现对注册表单校验

校验用户名是否在数据库中存在

向服务器发起异步请求

   <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>