<!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>
