现在的网站使用手机号码注册的越来越多,这就涉及到要在登录注册页面,判断用户手机号码是否已经存在,或者格式不正确,最近的系统里面正好遇到了,已经实现成功,在这里记录一下
如果电话号码已经存在,页面:
如果电话格式不正确,页面:
只有完全成功,符合规则,并且在没有被注册的情况下,才能注册成功
页面如上,现在放代码:
这个号码的验证,我主要放在js里面AJAX请求里面,现在放js代码:
<script type="text/javascript">
//判断手机号码的规范性
function isTruePhone(str){
var reg = /^1[34578]\d{9}$/;
if(!reg.test(str)){
return false;
}
return true;
}
//AJAX请求部分
document.getElementById("phonenumber").onblur = function() {
var span = document.getElementById("phonenumberid");
var values = phonenumber.value;
if (isTruePhone(values)) {
var xmlhttp = getXmlHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var msg = xmlhttp.responseText;
if (msg == "1") {
//表示成功,放入对号
span.innerHTML = "<img src='../images/success.jpg' width=60 height=30 >";
window.sessionStorage.setItem("phone", 1);
}
else
span.innerHTML = "该用户已经存在";
}
};
xmlhttp.open("POST","${pageContext.request.contextPath}/phonenumber");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("phonenumber=" + values);
}
else
span.innerHTML = "手机号码格式不对";
};
//关于浏览器的版本问题,设置xmlhttp
function getXmlHttpRequest() {
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); // 针对于现在的浏览器包括IE7以上版本
} else if (window.ActiveXObject) {
// 针对于IE5,IE6版本
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
</script>
为了更方便的知道里面Element分别是什么东西,我再放上前端HTML的代码
<tr>
<td align=center>手机号码:</td>
<td align=center><input id="phonenumber" type="text" name="phonenumber" style="width: 100%; height: 100%" /></td>
<td><span id="phonenumberid"></span></td>
</tr>
现在解释一个验证的相关细节:
(1)使用正则表达式进行格式验证
function isTruePhone(str){
var reg = /^1[34578]\d{9}$/;
if(!reg.test(str)){
return false;
}
return true;
}
其中,isTruePhone(str)就是检验手机号码格式是否正确的方法,
参数是str是将要检验的手机号码
/^1[34578]\d{9}$/ 这个是手机号码的验证,
正则表达式千万不要带双引号
正则表达式千万不要带双引号
正则表达式千万不要带双引号
重要的事情说三遍,两边的 / / 就是他们的标志,如果添加引号那就是普通的一个String了。
reg.test(str)是JS里面的一个系统方法,就好比String类型的数据就有【equals()】方法一样,这是要检测是否符合正则的要求,如果符合就返回true,不符合就返回false;
这个方法是一般情况下正则的规定格式。
(2)xmlhttp值的确定
function getXmlHttpRequest() {
var xmlhttp = null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest(); // 针对于现在的浏览器包括IE7以上版本
} else if (window.ActiveXObject) {
// 针对于IE5,IE6版本
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
这个方法就更加的正规和普遍,一般的AJAX里面都有这个方法。
主要是为了适应不同版本的浏览器,重点在xmlhttp的值的不同。
如果使用现在功能和兼容性最为强大谷歌和火狐,这个就不存在什么问题。
----------------------------------------------------------END-----------------------------------------------------------