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>
上一篇:Vue.js高效前端开发 • 【Vue组件】


下一篇:143. Reorder List