登录注册页面，JS判断用户手机号码是否已经存在，或者格式不正确

现在的网站使用手机号码注册的越来越多，这就涉及到要在登录注册页面，判断用户手机号码是否已经存在，或者格式不正确，最近的系统里面正好遇到了，已经实现成功，在这里记录一下

如果电话号码已经存在，页面：

如果电话已经存在，页面：

只有完全成功，符合规则，并且在没有被注册的情况下，才能注册成功

页面如上，现在放代码：

这个号码的验证，我主要放在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-----------------------------------------------------------