js验证手机号

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<title>绑定手机号</title>
</head>
<body>
    <form action="onlineUser/updatephone" method="post" onsubmit="return checkAll()">
        <input type="hidden" value="${userid }" name="id">
        手机号
        <input type="text" name="phonenumber" id="phonenumber"><br>
        验证码:<input type="text" name="vercode" id="vercode"> <input type="button" value="发送验证码" id="sendVercode"><br>
        <textarea rows="6" cols="4" id="validateCodeError" style="display: none;"></textarea>
        <input type="hidden" id="realvercode">
        <input type="submit" value="绑定">
    </form>
</body>
<script type="text/javascript">
function checkAll(){
    if(!$("#phonenumber").val().trim()){
        alert("请填写手机号");
        return false;
    }
    if(!$("#realvercode").val().trim()){
        alert("请填写验证码");
        return false;
    }
    if(!$("#vercode").val().trim()){
        alert("请填写验证码");
        return false;
    }
    return true;
}
$(function(){
    // 发送手机验证码
    $('#sendVercode').click(function() {
    
        var phoneNum = $('#phonenumber').val().trim(); // 获得发送手机的号码
        
        // 判断手机号码格式是否正确
        var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
                    var re = mobile.test(phoneNum);
                    if(re == false){
                        $('#validateCodeError').removeAttr('style');
                        $('#validateCodeError').empty();
                        $('#validateCodeError').html('请输入正确格式的手机号码');
                        return ;
                    }
        
        var flag = true ;
            if (phoneNum) {
                $.post('onlineUser/sendSMS', {
                            'phone' : phoneNum
                        },function(data){
                            if(data.status){
                                if(flag){
                                    alert(data.message);
                                    flag = false ;
                                }
                                $("#realvercode").val(data.data);
                                $('#validateCodeError').attr('style','display:none;');
                            }else{
                                console.log(data.message);
                                $('#validateCodeError').removeAttr('style');
                                $('#validateCodeError').empty();
                                $('#validateCodeError').html(data.message);
                            }
                        }, 'json');
            }else{
                console.log('未输入手机号码');
                $('#validateCodeError').removeAttr('style');
                $('#validateCodeError').empty();
                $('#validateCodeError').html('请输入手机号码');
            }

        });
});
</script>
</html>

 

posted @ 2016-08-23 15:56  花语苑  阅读(385)  评论(0编辑  收藏  举报