JQuery+Ajax用户注册验证

最新推荐文章于 2023-04-10 06:00:00 发布

秋小苒

最新推荐文章于 2023-04-10 06:00:00 发布

阅读量3.3k

点赞数

分类专栏： JQuery+JS+Ajax+JSON SpringBoot Java 文章标签：注册效验 JQuery Ajax

本文链接：https://blog.csdn.net/flower_CSDN/article/details/81261646

版权

Java 同时被 3 个专栏收录

57 篇文章 0 订阅

订阅专栏

JQuery+JS+Ajax+JSON

8 篇文章 0 订阅

订阅专栏

SpringBoot

4 篇文章 0 订阅

订阅专栏

对于Js,JQuery,Ajax都没咋学过的感觉，能看懂的程度，差不多用了快到两天终于自己把这些验证写完了。90%的东西都是自己写的。可能写的不够好，感觉网上看的那些JQuery+Ajax有点复杂，自己写的这个感觉看起来还挺简单的。
转载请注明出处哦！
重点内容
效验文件//regist.js


nameFlag=false;//定义一个全局变量，判断用户名是否合法，默认不合法。为了在ajax验证通过后再提交表单
function success_function(data) {
    $("#namespan").html("");
    if (data == "true") {
        $("#namespan").html("<font color='red' size='3'>用户名已被使用</font>");
        $("#name").focus();
        nameFlag=false;
        return false;
    } else {
        $("#namespan").html("<font color='green' size='3'>用户名可用</font>");
        nameFlag=true;
        return true;
    }
};
/**
 * JQuery和Ajax验证用户名是否存在
 * 
 * @returns
 */
function nameBlur() {
    $("#namespan").html("");
    var name = document.getElementById("name").value;
    if (name != "") {
        if (name.length < 6 || name.length > 16) {// 用户名的长度应该在6到16个字符之间
            $("#namespan").html(
                    "<font color='red' size='3'>用户名的长度应该在6到16个字符之间</font>");
            nameFlag=false;
            return false;
        } else {// 长度合法之后再检验用户名是否存在
            // 第一种
            $.ajax({
                type : "post",
                url : "check",// 后台的action
                data : {
                    username : name
                },// username为要向后传台入的参数名称
                dataType : "text",
                success : success_function
            // 服务器响应成功后将data即username的值传入到success_function中作为参数
            });
            // 第二种
            // $.post("check.action",{name:name},function(data){
            // if(data=="true"){
            // $("#name_exit").hide();
            // }else{
            // $("#name_exit").show();
            // }
            // },"text");

        }

    } else {
        $("#namespan").html("<font color='red' size='3'>用户名不能为空</font>");
        nameFlag=false;
        return false;
    }
}
/**
 * 密码格式验证 要求： 非空 密码可以为任意的字母，数字，下划线，@，.组成，长度9~16位
 * 不能为纯数字或者字母
 * 
 * @returns
 */
function pass1Blur() {
    $("#pass1span").html("");
    var pass1 = document.getElementById("pass1").value;
    if (pass1 == "") {
        $("#pass1span").html("<font color='red' size='3'>密码不能为空</font>");
        return false;
    } else {
        var regex1 = /^(([A-Za-z_]{9,16})|([\d]{9,16}))$/;// 纯数字或字母
        var regex2 = /^[\w*@*.*]{9,16}$/;// 密码可以为任意的字母，数字，下划线，@，.组成，长度9~16位
        if (pass1.length < 9 || pass1.length > 16) {
            $("#pass1span").html(
                    "<font color='red' size='3'>密码长度要求为9到16位</font>");
            return false;
        } else if (regex1.test(pass1) == true) {
            $("#pass1span").html(
                    "<font color='red' size='3'>密码必须由数字和字符组成</font>");
            return false;
        } else if (regex2.test(pass1) == false) {
            $("#pass1span").html("<font color='red' size='3'>密码中含有非法字符</font>");
            return false;
        } else {
            return true;
        }
    }
}
/**
 * 确认密码验证
 * 
 * @returns
 */
function pass2Blur() {
    $("#pass2sapn").remove();
    var pass1 = document.getElementById("pass1").value;
    var pass2 = document.getElementById("pass2").value;
    if (pass1 == pass2) {
        return true;
    } else {
        $("#pass2").after(
                "<span id='pass2sapn' style='color:red'>两次密码不一致</span>")
        return false;
    }
}
/**
 * 效验年龄 年龄在10~199之间 当不合法时弹出提示信息
 * 
 * @returns
 */
function ageBlur() {
    $("#ageSpan").html("");
    var age = $("#age").val();// 发现它会自动去掉空格诶
    // var regex1 = /^[1-9][0-9]{1}$/;// 年龄在10~99
    // var regex2 = /^1[0-9]{2}$/;// 年龄在100~199之间
    var regex = /^([1-9][0-9]{1})|(1[0-9]{2})$/;
    // if((regex1.test(age) == true)||(regex2.test(age) == true)){
    if (regex.test(age) == true) {
        return true;
    } else {
        $("#ageSpan").html("<font color='red' size='3'>输入的年龄不合法</font>");
        return false;
    }
}
/**
 * 效验电话号码 规则： 必须是满足下列格式的11位数字电话号码
 * 13（0-9）或者14（0-9）或者170或者15（0-3）或者15（5-9）或者18（0-9）+8位数字
 * 注：正整数（首位不能为0，如025不合法）的正则表达式：/^[1-9][0-9]*$/
 * 
 * 移动号码归属地支持号段:134 135 136 137 138 139 147 150 151 152 157 158 159 178 182 183
 * 184 187 188 联通号码归属地支持号段:130 131 132 145 155 156 176 186 电信号码归属地支持号段:133 153
 * 177 180 181 189 移动运营商:170
 * 
 * @returns
 */
function telBlur() {
    $("#telSpan").html("");
    var tel = $("#tel").val();
    var regex = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
    if (regex.test(tel) == true) {
        return true;
    } else {
        $("#telSpan").html("<font color='red' size='3'>电话号码格式不正确</font>");
        return false;
    }
}

function registSubmit() {
    if ((ageBlur() && nameFlag&&pass1Blur() && pass2Blur() && telBlur())) {
        return true;
    } else {
        alert("请完善你的信息再提交！");
        return false;
    }
}

注册页面regist.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>regist</title>

<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/regist.js"></script>
</head>

<body class="templatemo-bg-gray">
    <div align="center">

        <h1>regist form</h1>
        <form id="form1" action="regist" method="post">
            <table class="templatemo-container" style="width: 650px;">
                <tr>
                    <td>username:<input id="name" onblur="nameBlur()" type="text"
                        class="form-control" name="username"
                        placeholder="please input your name" /> 
                    </td>
                    <td><span id="namespan"></span></td>
                </tr>
                <tr>
                    <td>password:<input id="pass1" onblur="pass1Blur()"  type="password"
                        class="form-control" name="password" /></td>
                        <td><span id="pass1span"></span></td>
                </tr>
                <tr>
                    <td>passsure:<input id="pass2" onblur="pass2Blur()" type="password"
                        class="form-control" name="repassword" /></td>
                </tr>
                <tr>
                    <td>age:<br />
                    <input id="age" type="text" class="form-control" name="age" onblur="ageBlur()"
                        style="text-align: center; display: inline; width: 15%; margin-right: 8%;" />
                        <span id="ageSpan"></span>
                        <input type="radio" checked="checked" name="sex" value="f" />female&nbsp;&nbsp;
                        <input type="radio" name="sex" value="m" />male
                    </td>
                </tr>
                <tr>
                    <td>tel:<input id="tel" type="text" class="form-control"onblur="telBlur()"
                        name="tel" /><span id="telSpan"></span></td>
                </tr>
                <tr>
                    <td align="center">
                    <input type="submit" value="submit" class="btn" onclick="return registSubmit()"/></td>
                </tr>
            </table>
        </form>
        <h2 onclick="javascript:history.go(-1);">The history back</h2>
    </div>
</body>
</html>

后台接收Ajax请求的action
check

@ResponseBody   //将函数返回值作为请求返回值，没有这个注解的话，请求的响应应该是一个页面，不需要页面的话应该加上这个注解。
    @RequestMapping(value="check",method=RequestMethod.POST)
    public void check(TUser user) throws IOException {
        System.out.println("check"+user);
        if(userv.ExistUser(user)) {
            response.getWriter().print("true");
        }
        else {
            response.getWriter().print("false");
        }
    }

秋小苒

关注

0
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
JQuery+Ajax用户注册验证

对于Js,JQuery,Ajax都没咋学过的感觉，能看懂的程度，差不多用了快到两天终于自己把这些验证写完了。90%的东西都是自己写的。可能写的不够好，感觉网上看的那些JQuery+Ajax有点复杂，自己写的这个感觉看起来还挺简单的。重点内容效验文件//regist.jsnameFlag=false;//定义一个全局变量，判断用户名是否合法，默认不合法。为了在ajax验证通过后再提交表...
复制链接

扫一扫