html 判断输入的是手机号码,用js验证手机号码格式是否正确

记录一下在之前工作中遇到的手机号码验证的一个问题，主要是用正则表达式来判断手机号是否输入正确。下面附上代码，已经实现过的。

用户注册

用户注册

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;

}

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;

}