记录一下在之前工作中遇到的手机号码验证的一个问题，主要是用正则表达式来判断手机号是否输入正确。下面附上代码，已经实现过的。<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>用户注册</title>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
<header>
<div class="title">用户注册</div>
</header>
<div class="login">
<div class="mainlogin">
<div class="account">
<input type="users" name="phone" class="phone" placeholder="请输入手机号码">
</div>
<div class="cellphone_error"></div>
</div>
</div>
<script>
var Val={
//正则表达式验证是否为手机号码
isMobile:function(s){return this.test(s,/^1[34578]d{9}$/)},
isNumber:function(s,d){return !isNaN(s.nodeType==1?s.value:s)&&(!d||!this.test(s,"^-?[0-9]*\.[0-9]*$"))},
isEmpty:function(s){return !jQuery.isEmptyObject(s)},test:function(s,p){s=s.nodeType==1?s.value:s;return new RegExp(p).test(s)}
};
$(".users").blur(function(){
var v=$(this).val();
var n=$(this).next();
if(!isEmpty(v) && !Val.isMobile(v)){
$(".cellphone_error").html("请输入正确的手机号码！");
$(‘.account‘).css(‘border‘,‘1px solid #ff0000‘);
return;
}if(isEmpty(v)){
$(".cellphone_error").html("请输入账号！");
$(‘.account‘).css(‘border‘,‘1px solid #ff0000‘);
return;
}
</script>
</body>
</html>css样式
@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date 2016-11-08 17:38:55
* @version $Id$
*/
html,body {
font-family: Helvetica, "microsoft yahei";
margin: 0px;
padding: 0px;
}
input,textarea {
-webkit-user-modify: read-write-plaintext-only;
-webkit-appearance: none;
outline: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
.clear{
clear: both;
}
.hidden {
visibility: hidden;
}
::-webkit-input-placeholder {
/* WebKit browsers */
color: #c0c0c0;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #c0c0c0;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #c0c0c0;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #c0c0c0;
}
/**头部样式**/
.header{
width: 100%;
background: #2cc2ff;
height:94px;
}
.mainheader {
width: 664px;
margin: 0 auto;
height: 36px;
padding: 29px 28px 29px 28px;
}
.closeicon{
float: left;
width: 36px;
height:36px;
}
.closeicon img {
width: 36px;
height: 36px;
}
.mainheader .title{
font-size: 34px;
color: #ffffff;
height: 36px;
line-height: 36px;
width: 664px;
text-align: center;
letter-spacing: 4px;
float: left;
}
.login{
width: 720px;
margin: 0 auto;
padding-top: 50px;
}
.mainlogin{
width: 80%;
margin: 0 10%;
}
.account,.password{
width: 100%;
height:94px;
border-radius: 8px;
border: 1px solid #a6dfff;
line-height: 100px;
}
.account input, .password input {
font-size: 28px;
font-family: Helvetica, "microsoft yahei";
outline: none;
border: 0px;
width: 75%;
margin-left: 3.3%;
}
.cellphone_error, .getcode_error{
color: #f60000;
font-size: 20px;
height: 56px;
line-height: 56px;
}
.loginbtn{
width: 100%;
height:94px;
font-size: 28px;
font-family: Helvetica, "microsoft yahei";
color: #fff;
outline: none;
border: 1px solid #2cc2ff;
border-radius:96px;
letter-spacing: 2px;
background: #2cc2ff;
line-height: 100px;
}
.forgetpsd {
font-size: 28px;
height: 28px;
line-height: 28px;
color: #ffae00;
float: right;
margin-bottom: 25px;
}
.quklog_register {
margin-top: 40px;
/*margin-bottom: 198px;*/
font-size: 28px;
color: #8e8e8e;
}
.quklog_register a {
color: #2cc6ff;
font-size: 28px;
text-decoration: none;
}
.goregister {
float: right;
}
.loadingDiv{
position:absolute;
background:#000;
background-size: 100% 100%;
opacity:0.5;
filter:alpha(opacity=50);
top:0;
right: 0;
left:0;
bottom: 0;
margin:auto;
z-index:10000;
}
.loadingImg{
position:absolute;
width:57px;
height: 57px;
top:420px;
right: 0;
left:0;
bottom: 0;
margin:0 auto;
z-index:10000;
cursor: wait;
background:url(../images/loading2.gif) no-repeat scroll 5px 10px;
}
.otherway {
width: 588px;
height: 20px;
position: relative;
margin:0 auto;
margin:0 auto;
}
.line {
width: 588px;
height: 1px;
background: #D9EBFF;
}
.methods {
position: absolute;
top: -50%;
left: 30.1%;
color: #c0c0c0;
background: #ffffff;
font-size: 20px;
height: 20px;
line-height: 20px;
width: 232px;
text-align: center;
}
.mode {
width: 384px;
height: 48px;
margin: 0 auto;
margin-bottom: 172px;
margin-top:38px;
}
.account_error,
.password_error {
color: #f60000;
font-size: 20px;
margin-left: 66px;
height: 56px;
line-height: 56px;
}