html:
<div class="left_box lf">
<div class="menu">
<span style="color: #ccc;">忘记密码</span>
</div>
<div class="content">
<!-- 登录 -->
<div class="content_inner active" data-content="one">
<p>
<img src="images/pc_icon_telephone.png" alt=""/>
<input id="loginPhone" type="text" value="" placeholder="请输入手机号"/>
</p>
<p style="margin-top: 10px;width:90%;overflow:hidden;margin-left:5%">
<input id="iputCode" type="text" placeholder="请输入验证码" style="width:65%;padding-left:20px;float:left;">
<input type="button" id="obtain" value="获取验证码" style="cursor: pointer;float:left;width:35%;padding-left: 0;color:#2C8FFF;background: none;">
</p>
<button id="nextStep" class="login">下一步</button>
</div>
</div>
</div>
js:
$(function(){
//获取验证码
$(\'#obtain\').click(function(){
var ipone = isIpone($(\'#loginPhone\').val());//手机号验证
var loginPhone = document.getElementById(\'loginPhone\').value;
var Weburl = G_WEBBASE + \'rcall.jsp?sytid=CHIS&mwid=GzyyInterface02&funcid=PhoneJY&userid=\'+loginPhone;
if(ipone == true){
//请求
try {
$.ajax({
url: Weburl,
async: false,
timeout: 8000,
type: \'POST\',
success: function(result) {
try {
result = result.trim();
result = result.replace(/\n/g, \'\');//此处做去空格处理
console.log(result)
if(result == \'0\'){
alert(\'该号码未注册\');
}else {
alert("验证码已发送，请注意查收");
time();//调用
document.getElementById(\'iputCode\').setAttribute(\'class\',result);//让该元素添加calss
}
} catch(e) {
// alert("接口错误，请联系客服");
}
},
error: function(xhr, status, error) {
if(status == "error")
alert(\'请检查网络连接\');
}
});
} catch(error) {
alert("请检查网络连接");
}
}
})
//下一步
$(\'#nextStep\').click(function(){
var ipone = isIpone($(\'#loginPhone\').val());//手机号验证
var loginPhone = document.getElementById(\'loginPhone\').value;// 获取用户手机号码
if(ipone != true){
return;
}
var yzm = verify();//此处调用验证方法
if(yzm != true){
return;
}
if(ipone == true && yzm == true) {
// 下一步跳转设置密码页面
window.open(\'resetPassword.html?iphone=\'+loginPhone)
}
})
})
/**
* 点击获取验证码后显示倒数时间
*/
var wait = 60;// 定义短信发送倒计时时间
function time(){
document.getElementById(\'obtain\').disabled = false; //让按钮可以点击
if(wait == 0) {
document.getElementById(\'obtain\').removeAttribute("disabled"); // 控制按钮可点击
document.getElementById(\'obtain\').value = "获取验证码";
document.getElementById(\'obtain\').style.color = \'#2C8FFF\';
wait = 60; //还原倒计时
}else{
document.getElementById(\'obtain\').setAttribute("disabled", true);//控制按钮不可点击
document.getElementById(\'obtain\').value = "重新发送(" + wait + ")";
document.getElementById(\'obtain\').style.color = \'#C0BBBB\';
wait--;
setTimeout(\'time()\', 1000) //循环调用
}
}
/**
* 验证验证码是否正确
*/
function verify() {
var yzm = document.getElementById(\'iputCode\').value; // 获取注册用户填写的验证码
var yzmtwo = document.getElementById(\'iputCode\').className; // 系统发送的验证码
if (yzm == ""){
alert("验证码不能为空");
return false;
}else if (yzm != yzmtwo){
alert("验证码错误，请重新输入！");
eturn false;
}
return true;
}
//手机号验证
function isIpone(ipone) {
var reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))[0-9]{8}$/;
if(ipone != "") {
if(reg.test(ipone) === false) {
alert("手机号输入不合法");
return false;
}
}else{
alert("手机号不能为空");
return false;
}
return true;
}