<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注冊</title>
</head>
<body>
<!--注冊開始-->
<div class="container-fluid">
<div class="center_container container-top">
<form accept-charset="UTF-8" action="javascript:void(0)" class="form-horizontal" method="post">
<fieldset class="login">
<legend class="form_legend">賬號信息</legend>
<div class="control-group">
<span class="label1">手機號</span>
<input id="tel" name="name" value="" size="30" type="text">
<span id="check_1" style="display:none;color:red;padding-left:35%">*請輸入手機號</span>
<span id="check_2" style="display:none;color:red;padding-left:30%">*請輸入正確的手機號</span>
<span id="check_3" style="display:none;color:red;padding-left:30%">*請輸入有效的手機號</span>
</div>
<div class="control-group">
<span class="label1">設置密碼</span>
<input id="xlPassword" name="password" size="5" type="password" placeholder="6到20位字符">
</div>
<div class="control-group" style="width: auto">
<span class="label1">驗證碼</span>
<input value="" size="30" type="text" style="width: 50px">
<!--<a href="#" class="btn">獲取驗證碼</a>-->
<input type="button" class="btn" id="getsms" onclick="getCode(this)" value="獲取驗證碼"/>
<!--<input type="button" class="btn" id="re_send_btn" style="display:none;" value="獲取驗證碼"/>-->
<button class="btn" id="re_send_btn" style="display:none;width: auto"><span id="re_send_txt">120</span>秒后重發</button>
</div>
<div class="control-group">
<span class="label1"></span>
<input type="submit" class="btn btn-primary" value=" 提 交 ">
</div>
</fieldset>
</form>
</div>
</div>
<!--注冊結束-->
</div>
</body>
</html>
<script src="http://js.3conline.com/min/temp/v1/lib-jquery1.4.2.js"></script>
<script>
/*獲取驗證碼*/
var isPhone = 1;
function getCode(e){
checkPhone(); //驗證手機號碼
if(isPhone){
resetCode(); //倒計時
}else{
$('#tel').focus();
}
}
//驗證手機號碼
function checkPhone(){
var phone = $('#tel').val();//獲取輸入的手機號
var pattern = /^1[0-9]{10}$/;/*是否為11位*/
var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; /*手機號段設置*/
isPhone = 1;
//未輸入內容時，給出提醒
if(phone == '') {
//alert('請輸入手機號碼');
$('#check_1').show();
isPhone = 0;
return;
}
else{
$('#check_1').hide();
}
//不滿足11位條件時，給出提醒
if(!pattern.test(phone)){
//alert('請輸入正確的手機號碼');
$('#check_2').show();
isPhone = 0;
return;
}
else{
$('#check_2').hide();
}
//手機號段判斷，不符的話，提醒重新輸入手機號
if(!myreg.test($("#tel").val())){
//alert('請輸入有效的手機號！');
$('#check_3').show();
isPhone = 0;
return;
}
else{
$('#check_3').hide();
}
}
//倒計時
function resetCode(){
$('#getsms').hide();
$('#re_send_txt').html('120');
$('#re_send_btn').show();
var second = 120;
var timer = null;
timer = setInterval(function(){
second -= 1;
if(second >0 ){
$('#re_send_txt').html(second);
}else{
clearInterval(timer);
$('#getsms').show();
$('#re_send_btn').hide();
}
},1000);
}
</script>
