记录一下在之前工作中遇到的手机号码验证的一个问题,主要是用正则表达式来判断手机号是否输入正确。下面附上代码,已经实现过的。
用户注册 用户注册
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;}