省份二级联动
程序员文章站
2022-06-17 20:48:10
$(function(){ //适配本地和测试环境 var host = "http://api.bch.xuemao.com", xmhost = 'http://dev.www.xuemao.com'; var winurl = (window.location.href).split('/')... ......
$(function(){
//适配本地和测试环境
var host = "http://api.bch.xuemao.com",
xmhost = 'http://dev.www.xuemao.com';
var winurl = (window.location.href).split('/')[2];
if(winurl.indexof('dev')>=0){
host = "http://api.bch.xuemao.com";
xmhost = 'http://dev.www.xuemao.com';
}else if(winurl.indexof('bch') >= 0){
host = "http://api.bch.xuemao.com";
xmhost = 'http://www.bch.xuemao.com';
}else{
host = "http://api.xuemao.com";
xmhost = '//www.xuemao.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("请输入手机号!");
return false;
//手机号正则
}else if(!(/^1[3456789]\d{9}$/.test(phone))) {
$('#smsmsglayer .error').show();
$('#smsmsglayer .error .error_msg').html("请输入正确的手机号");
return false;
}
return true;
}
//手机验证码
function checksmscode(){
var smscode = $.trim($('#smscodelayer').val());
if (smscode == null || smscode == "") {
$('#smsmsglayer .error').show();
$('#smsmsglayer .error .error_msg').html("请输入验证码");
$('#smsmsglayer .error .error_msg').css({
'color':'#fff'
})
return false;
}
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 .succ').fadeout(3000);
}else{
$('#smsmsglayer .error').fadein(500);
$('#smsmsglayer .error .error_msg').html(res.info);
$('#smsmsglayer .error').fadeout(3000);
clear_inter();
return false;
}
},
error: function(res){
$('#smsmsglayer .error').show();
$('#smsmsglayer .error .error_msg').html("请重新获取");
clear_inter();
return false;
// console.log(res)
}
});
}
//用户名非必填,填了就检验格式
$("#nusernamelayer").blur(function(){
var nusername = $('#nusernamelayer').val();
if(nusernamelayer == '') return false;
//只能输入中文 英文 和空格
var reg =/^[a-za-z\u4e00-\u9fa5\s ]{1,20}$/;
if(!(reg.test(nusername))) {
$('#namemsglayer .error .error_msg').html("姓名格式不正确");
$('#namemsglayer .error').show();
return false;
}else {
$('#namemsglayer .error .error_msg').html("");
$('#namemsglayer .error').hide();
return true;
}
});
//用户名验证码
function t_usrname(){
var nusername = $('#nusernamelayer').val();
//只能输入中文 英文 和空格
var reg =/^[a-za-z\u4e00-\u9fa5\s ]{1,20}$/;
if(nusername == null || nusername == "") {
return true;
}else if(nusername!=''){
if(!(reg.test(nusername))) {
$('#namemsglayer .error .error_msg').html("姓名格式不正确");
$('#namemsglayer .error').show();
return false;
}
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_code').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;
}
$("#hq_smslayer").css({"background":"#b41f5e","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();
// var cityval =$('#city-picker-span .placeholder').html();
$.ajax({
type:"get",
url: host+'/xuemao/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>'
}
// console.log(html);
$('#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);
}else{
$('#smsmsglayer .error .error_msg').html(res.info);
$('#smsmsglayer .error').css({
'color':'#fff',
"position":"absolute",
"bottom":'-23px',
"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(1是pc,2是触屏)
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('');
}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(!checkphone()){
return false;
}
if(!checksmscode()){
return false;
}
if(!t_usrname()){
return false;
}
mobile_submit(userinfo);
})
//非本区域隐藏
$('body').click(function(e) {
var target = $(e.target);
if(!target.is('#provinceslayer *') && !target.is('#cityslayer *')) {
$('#cityslayer').hide();
$('#provinceslayer').hide();
}
});
})
上一篇: 谈谈分库分表的几个核心流程
下一篇: 2020-09-29
推荐阅读
-
iOS 页面滑动与标题切换颜色渐变的联动效果实例
-
MyBatis一二级缓存
-
2021年400分左右的本科大学:理科400分能上二本吗(陕西、辽宁、安徽等省份)
-
微信小程序实现的picker多级联动功能示例
-
军工二级保密单位名单(院校)-国家二级保密大学名单最新完整版(含录取分数线)
-
【MyBatis源码全面解析】MyBatis一二级缓存介绍
-
jquery+php后台实现省市区联动功能示例
-
二本重点文科大学名单及分数线汇总2021年参考(含河南、重庆等省份)
-
高考400~450分能上哪所大学2021年参考?(含山西、云南、山东、广东等省份)
-
2021年450分左右的文科大学名单汇总(公办,含山东、河北等省份)