手机号码验证

这篇博客介绍了如何使用Ajax进行手机号码验证。首先通过Ajax调用Servlet发送短信验证码,然后在前端获取用户输入的验证码并再次通过Ajax发送到Servlet进行比对。如果验证码匹配,将密码修改为手机号后四位。涉及的技术包括jQuery、Ajax、Servlet、HTTP请求和短信发送API。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.首先用ajax调用servlet

<script type="text/javascript">
    $(function() {
        $('#bt').click(function() {
            var number = window.document.getElementById("phoneNumber").value;
            //var codes = window.document.getElementById("codes").value;
            $.ajax({
                //第一步 请求路径
                url : "code",
                //第二步 请求方式:get或post
                type : "get",
                //第三步 请求参数:1.传统的拼接 2.json格式
                //data:"uname=对对对&pwd=123",
                data : {
                    "phoneNumber" : number
                },
                //默认发送的是异步请求,若为false 则为同步请求
                async : true,
                //服务器返回的参数的类型:jason/text/html三种方式
                dateType : "text",
                //请求的结果:success成功响应后执行的方法
                success : function(content) {
                    //content响应正文,回调参数
                    //alert(content);
                },
                error : function() {
                    //没有回调参数,url不存在,响应接收类型不一致
                    alert("验证失败");
                }
            });
        });
    });

    function show() {
        var codes = window.document.getElementById("codes").value;
        var number = window.document.getElementById("phoneNumber").value;
        $.ajax({
            //第一步 请求路径
            url : "code_reg",
            //第二步 请求方式:get或post
            type : "get",
            //第三步 请求参数:1.传统的拼接 2.json格式
            //data:"uname=对对对&pwd=123",
            data : {
                "codes" : codes,
                "phoneNumber" : number
            },
            //默认发送的是异步请求,若为false 则为同步请求
            async : true,
            //服务器返回的参数的类型:jason/text/html三种方式
            dateType : "text",
            //请求的结果:success成功响应后执行的方法
            success : function(row) {
                //content响应正文,回调参数
                if(row>0){
                alert("密码修改成功,初始密码为手机号后4位");
                location.href="show_All";
                }else{
                    alert("密码修改失败");
                    location.href="show_All";
                }
                    
            },
            error : function() {
                //没有回调参数,url不存在,响应接收类型不一致
                alert("验证失败");
            }
        });

    };
</script>

2.对应的两个servlet

@WebServlet("/code")
public class sendCodeServlet extends HttpServlet {

    private static final long serialVersionUID = -8559217512617151073L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String phoneNumber = req.getParameter("phoneNumber");

        if (phoneNumber.trim().equals("") || phoneNumber == null) {
            resp.sendRedirect("show_All");
            return;
        }
        // 生成一个6位0~9之间的随机字符串
        StringBuffer buffer = new StringBuffer();
        Random random = new Random();
        for (int i = 0; i < 6; i++) {
            buffer.append(random.nextInt(10));
        }
        PrintWriter out = resp.getWriter();
        try {
            if (!SMScode.sendCode(phoneNumber, buffer.toString())) {
            } else {
                // 将验证码、手机号码和当前的系统时间存储到session中
                req.getSession().setAttribute("code", buffer.toString());
                req.getSession().setAttribute("number", phoneNumber);
                req.getSession().setAttribute("time", System.currentTimeMillis());
                // 将数据yitext传前台
                resp.getWriter().write(buffer.toString());
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        out.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        doGet(req, resp);
    }
}

@WebServlet("/code_reg")
public class RegCodes extends HttpServlet {
    private static final long serialVersionUID = 1L;

    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String codes = req.getParameter("codes");
         String phoneNumber = req.getParameter("phoneNumber");
        String code = (String) req.getSession().getAttribute("code");
 
        if (codes.equals(code)) {//两次验证一样,修改密码为手机后4位
            IUserService us=new UserServiceImpl();
            int updateUserByMobel = us.updateUserByMobel(phoneNumber);
            resp.getWriter().write(JSON.toJSONString(updateUserByMobel));
        }else {//失败修改
        resp.getWriter().write(JSON.toJSONString(0));
        }
    }

    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }
}

3.发送验证码的方法

public class SMScode {

    // 把手机号码和随机验证码传递过来
    public static boolean sendCode(String phoneNumber, String code) throws Exception {

        String str_code = URLEncoder.encode("#code#=" + code, "UTF-8");
        // 包装好URL对象,将接口地址包装在此对象中
        URL url = new URL("http://v.juhe.cn/sms/send?mobile=" + phoneNumber + "&tpl_id={此处去聚合数据申请即可}&tpl_value=" + str_code
                + "&key={此处去聚合数据申请即}");
        /* 短信模板id */ /* 短信应用接口的key */
        // 打开连接,得到连接对象
        URLConnection connection = url.openConnection();
        // 向服务器发送连接请求
        connection.connect();
        // 获得服务器响应的数据
        BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(connection.getInputStream(), "UTF-8"));
        StringBuffer buffer = new StringBuffer();
        String lineDate = null;
        while ((lineDate = bufferedReader.readLine()) != null) {
            buffer.append(lineDate);
        }
        bufferedReader.close();
        if (buffer.toString().indexOf("\"error_code\":0") >= 0) {
            return true;
        }

        return false;
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值