短信提交验证

 

$(function(){
//适配本地和测试环境
var host = "http://api.bch.XXX.com",
xmhost = 'http://dev.www.XXX.com';
var winurl = (window.location.href).split('/')[2];
if(winurl.indexOf('dev')>=0){
host = "http://api.bch.XXX.com";
xmhost = 'http://dev.www.XXX.com';
}else if(winurl.indexOf('bch') >= 0){
host = "http://api.bch.XXX.com";
xmhost = 'http://www.bch.XXX.com';
}else{
host = "http://api.XXX.com";
xmhost = '//www.XXX.com';
}
var cityMassage = '';
//手机号
function checkPhone(){
var phoneNumber = $.trim($('#t_codeLayer').val());
var phone = document.getElementById('t_codeLayer').value;
if (phoneNumber == null || phoneNumber == "") {
$('#smsmsgLayer .error').show();
$('#smsmsgLayer .error .error_msg').html("请输入手机号!");
$('#smsmsgLayer').css('marginBottom','19px');
return false;
//手机号正则
}else if(!(/^1[3456789]\d{9}$/.test(phone))) {
$('#smsmsgLayer .error').show();
$('#smsmsgLayer .error .error_msg').html("请输入正确的手机号");
$('#smsmsgLayer').css('marginBottom','19px');
return false;
}
return true;
$('#smsmsgLayer').css('marginBottom','10px');
}
//手机验证码
function checkSmsCode(){
var smsCode = $.trim($('#smsCodeLayer').val());
if (smsCode == null || smsCode == "") {
$('#smsmsgLayer .error').show();
$('#smsmsgLayer .error .error_msg').html("请输入验证码");
$('#smsmsgLayer').css('marginBottom','19px');
$('#smsmsgLayer .error .error_msg').css({
'color':'#fff'
})
return false;
}
$('#smsmsgLayer').css('marginBottom','10px');
return true;
}

var daoshus = 60;
var timer = null;
//获取验证码倒计时1分钟
function fn_daoshu(){
$("#smsmsgLayer .daoshus").show();
daoshus -- ;
$("#smsmsgLayer .daoshus").text(daoshus +'s');
if(daoshus == 0){
clear_Inter();
}
}
//清楚定时器
function clear_Inter(){
daoshus = 60;
$("#smsmsgLayer .daoshus").text('60s').hide();
clearInterval(timer);
}

//发送短信验证码
$("#hq_smsLayer").click(function(){
var mobile = $.trim($('#t_codeLayer').val());
if(!checkPhone()){
return false;
}
send_login_code(mobile);
});

//发送短信验证码
function send_login_code(mobile)
{
$("#smsmsgLayer .daoshus").show();
timer = setInterval(fn_daoshu,1000);
$("#smsCodeLayer").attr("disabled" , false);
$.ajax({
type:"GET",
url:xmhost+'/api/user/get_sms_code',
data:{
mobile: mobile,
},
datatype: "json",
success:function(res){
if(res.status == 'true'){
// com.prompt("发送成功!");
$('#smsmsgLayer .succ').fadeIn(500);
$('#smsmsgLayer .succ').html("发送成功!");
$('#smsmsgLayer').css('marginBottom','19px');
$('#smsmsgLayer .succ').fadeOut(3000);
}else{
$('#smsmsgLayer .error').fadeIn(500);
$('#smsmsgLayer .error .error_msg').html(res.info);
$('#smsmsgLayer').css('marginBottom','19px');
$('#smsmsgLayer .error').fadeOut(3000);
clear_Inter();
return false;
}
},
error: function(res){
$('#smsmsgLayer .error').show();
$('#smsmsgLayer .error .error_msg').html("请重新获取");
$('#smsmsgLayer').css('marginBottom','19px');
clear_Inter();
return false;
}
});
}

//用户名非必填,填了就检验格式
$("#nusernameLayer").blur(function(){
var nusername = $('#nusernameLayer').val();
if(nusername == '') return false;
//只能输入中文 英文 和空格
var reg =/^[a-zA-Z\u4e00-\u9fa5\s ]{1,20}$/;
if(!(reg.test(nusername))) {
$('#nameMsgLayer .error .error_msg').html("姓名格式不正确");
$('#nameMsgLayer .error').show();
$('#nameMsgLayer').css('marginBottom','19px');
return false;
}else {
$('#nameMsgLayer .error .error_msg').html("");
$('#nameMsgLayer .error').hide();
$('#nameMsgLayer').css('marginBottom','10px');
return true;
}
});
//用户名验证码
function t_usrname(){
var nusername = $('#nusernameLayer').val();
//只能输入中文 英文 和空格
var reg =/^[a-zA-Z\u4e00-\u9fa5\s ]{1,20}$/;
if(nusername == null || nusername == "") {
$('#nameMsgLayer').css('marginBottom','10px');
return true;
}else if(nusername!=''){
if(!(reg.test(nusername))) {
$('#nameMsgLayer .error .error_msg').html("姓名格式不正确");
$('#nameMsgLayer .error').show();
$('#nameMsgLayer').css('marginBottom','19px');
return false;
}
$('#nameMsgLayer').css('marginBottom','10px');
return true;
}
}
$('#nusernameLayer').on("input",function(){
var nusername = $('#nusername').val();
if (nusername == null || nusername == "") {
$('#nameMsgLayer .error').hide();
$('#nameMsgLayer .error .error_msg').html("");
return true;
}
})
//手机号失焦校验
$('#t_codeLayer').blur(function(){
if(!checkPhone()){
return false;
}
})
//正在输入检验
$('#t_codeLayer').on("input",function(){
var phoneNumber = $.trim($('#t_codeLayer').val());
var phone = document.getElementById('t_codeLayer').value;
if (phoneNumber == null || phoneNumber == "") {
$("#hq_smsLayer").css({"background":"#eee","color":"#999"});
return false;
//手机号正则
}else if(!(/^1[3456789]\d{9}$/.test(phone))) {
$("#hq_smsLayer").css({"background":"#eee","color":"#999"});
return false;
}
console.log(phoneNumber)
$("#hq_smsLayer").css({"background":"#50ca9e","color":"#fff"});
$("#hq_smsLayer.colr").css({"background":"#13c5c1","color":"#fff"});
$("#hq_smsLayer .dbing").css({"background":"#b41f5e","color":"#fff"});
$("#smsmsgLayer .error").hide();
$("#smsmsgLayer .error .error_msg").html('');
})

//省份
var citysData = [];
$('.city-picker-spanLayer').click(function(){
$('#provincesLayer').hide();
$('#citysLayer').hide();
$.ajax({
type:"GET",
url: host+'/XXX/public/china_city_class.json',
data:{
city:'-'
},
dataType: 'json',
success: function(res){
if(res.result == 'succ'){
citysData = res.data;
var data=res.data;
var html ='';
for(var i=0;i<data.length;i++){
var province= data[i].province;
html+='<a data-id="'+data[i].id+'" >'+province+'</a>';
}
$('#provincesLayer .a_padd').html(html)
$('#provincesLayer').show();
}
},
error: function(res){
}
})

})

//选择市
var proVal = '';
var cityVal = '';
$("#provincesLayer").on("click" , ".a_padd a" ,function(){
$('#cityLayer').hide();

proVal=$(this).html();
var this_id = $(this).attr('data-id');
$('.city-picker-spanLayer .placeholder').html(proVal);
cityMassage = proVal;
if(this_id == '2'|| this_id == '19' ||this_id == '857' ||this_id == '2459'){
var html = $(this).html();
$('#citysLayer .a_padd').html('<a >'+html+'</a>');
$('#provincesLayer').hide();
$('#citysLayer').show();
}else {
//二级
for(var i=0;i<citysData.length;i++){
if(this_id == citysData[i].id){
var html = '';
for(var j=0;j<citysData[i].son.length;j++){
html += '<a data-id="'+citysData[i].son[j].id+'">'+citysData[i].son[j].city+'</a>'
}
$('#provincesLayer').hide();
$('#citysLayer .a_padd').html(html);
$('#citysLayer').show();
}
}
}
});

//填充表单数据
$("#citysLayer").on("click" , ".a_padd a" ,function(){
cityVal= $(this).html();
$('.city-picker-spanLayer .placeholder').html(proVal+'-'+cityVal)
cityMassage = proVal+'-'+cityVal;
$('#provincesLayer').hide();
$('#citysLayer').hide();
})
//提交前手机号验证码验证
function mobile_submit(userInfo ){
$.ajax({
type:"GET",
url: xmhost+'/api/user/check_sms_code',
data:{
mobile : userInfo.mobile,
code : userInfo.code
},
dataType: 'json',
success: function(res){
if(res.status == 'true'){
postMsg(userInfo);
$('.city-picker').css('marginTop','0');
}else{
$('#smsmsgLayer .error .error_msg').html(res.info);
$('#smsmsgLayer').css('marginBottom','10px');
$('.city-picker').css('marginTop','10px');
$('#smsmsgLayer .error').css({
'color':'#fff',
"position":"absolute",
"bottom":'-18px',
"left":0,
'display':'block'
});
return false;
}
},
error: function(res){
return false;
}
})

}

//提交按钮
function postMsg(userInfo){
var reg_source = $.trim($("#source").val()), //暂时写死
name=$('#nusernameLayer').val();
var submitInfo = {
name:name,
city:cityMassage,
mobile : userInfo.mobile,
code : userInfo.code ,
reg_source : reg_source,
pf_source:1 , //pf_source:2(1pc2是触屏)
ip: returnCitySN["cip"]
};
$.ajax({
type:"GET",
url: host+'/xuemao/formcollection/save_form_data.json',
data:submitInfo,
xhrFields: {
withCredentials: true
},
dataType: 'json',
success: function(res){
if(res.result == 'succ'){
clear_Inter();
$('#submsgLayer').fadeIn(500);
$('#submsgLayer').html("已提交!");
$('#submsgLayer').fadeOut(1000);
$('#smsmsgLayer .error').hide();
$('#t_codeLayer').val('');
$("#smsCodeLayer").attr('disabled','disabled').val('');
$("#hq_smsLayer").css({"background":"#eee","color":"#999"});
$('.city-picker-spanLayer .placeholder').html('选择省份/自治区');
$('#nusernameLayer').val('');
$('#smsmsgLayer').css('height','33px');
$('#smsmsgLayer .error').css({
"bottom":'-18px'
});
}else {
// show_msg(res.info);
$('#submsgLayer').fadeIn(500);
$('#submsgLayer').html(res.info);
$('#submsgLayer').fadeOut(1000);
}
},
error: function(res){
return false;
}
})
}

$('#s_btnLayer').click(function(){
var phone = $.trim($('#t_codeLayer').val()),
yz_code = $.trim($('#smsCodeLayer').val());

var userInfo = {
mobile : phone, //手机号
code : yz_code //验证码
};
if(!t_usrname()){
return false;
}
if(!checkPhone()){
return false;
}
if(!checkSmsCode()){
return false;
}
mobile_submit(userInfo);
})

//非本区域隐藏
$('body').click(function(e) {
var target = $(e.target);
if(!target.is('#provincesLayer *') && !target.is('#citysLayer *')) {
$('#citysLayer').hide();
$('#provincesLayer').hide();
}
});
var wwidth = document.documentElement.clientWidth;
$('#closeLayer').click(function() {
foot_timer = setTimeout(calcd, 10);
$('.er_cord').fadeOut(200)
$('.formbox').fadeOut(200);
$(this).hide();
$('.adv').fadeOut(800);
setTimeout(function(){
$('.advShow').show(400);
},500)
})
$('.advShow').click(function(){
setTimeout(calcw, 10);
$('.bottomLayer').css("bottom",0)
$('#closeLayer').fadeIn(400);
$('.adv').fadeIn(800);
$(this).hide();
setTimeout(function(){
$('.formbox').fadeIn(1000);
$('.er_cord').fadeIn(1600)
},100)
})
var foot_timer =null;
var times=null;
var bottomshowStep=20;
var step=5;
var wstepb=-5;
var wstep=-10;
var interval=2;
var thisdiv=document.querySelector('.bottomLayer');
var thisfbottom =50;
function calcd(){
moveWidthStep();
}
function calcw(){
moveWidthStepshow();
var divstyle =getComputedStyle(thisdiv);
console.log(divstyle.width)
}
function moveBottomStep(){//移动一步
$('.bottomLayer').hide(600)
var divstyle =getComputedStyle(thisdiv);
thisdiv.style.bottom = parseInt(divstyle.bottom)+(-wstepb)+'px';
if(parseInt(thisdiv.style.bottom)<thisfbottom){
times = setTimeout(function(){
moveBottomStep();
},interval)
}
if(parseInt(thisdiv.style.bottom)>=thisfbottom){
thisdiv.style.bottom=thisfbottom+'px';
clearTimeout(times)
}
}
function moveWidthStep(){//移动一步
// $('.bottomLayer').hide(400);
var divstyle =getComputedStyle(thisdiv);
thisdiv.style.width = parseInt(divstyle.width)+wstep+'px';
// console.log(thisdiv.style.width)
if(parseInt(thisdiv.style.width)>0){
timew = setTimeout(function(){
moveWidthStep();
},interval)
}
if(parseInt(thisdiv.style.width)<parseInt(-wstep)){
thisdiv.style.width=0;
clearTimeout(timew)
timew=null;
}
}

function moveWidthStepshow(){
var divstyle =getComputedStyle(thisdiv);
thisdiv.style.width = parseInt(divstyle.width)+bottomshowStep+'px';
console.log(divstyle.width)
if(parseInt(thisdiv.style.width)<wwidth){
timewd = setTimeout(function(){
moveWidthStepshow();
},interval)
}
if(parseInt(thisdiv.style.width)>wwidth){
thisdiv.style.width='100%';
clearTimeout(timewd)
timewd=null;
}
}
})

 

posted @ 2018-12-10 14:10 精灵YJUI 阅读(...) 评论(...) 编辑 收藏