簡訊提交驗證

来源:https://www.cnblogs.com/liubingyjui/archive/2018/12/10/10096173.html
-Advertisement-
Play Games

// 簡訊提交驗證 //$(function(){ var daoshu = 60; var timer = null; //手機號 function checkPhone(){ var phoneNumber = $.trim($('#t_code').val()); var phone = do ...


//-------------------------------------------簡訊提交驗證------------------------------------------//
$(function(){
var daoshu = 60;
var timer = null;
//手機號
function checkPhone(){
var phoneNumber = $.trim($('#t_code').val());
var phone = document.getElementById('t_code').value;
var smsCode = $.trim($('#smsCode').val());
if (phoneNumber == null || phoneNumber == "") {
//com.prompt('請輸入手機號！');
$('#yaerror').show();
$('#yaerror span').html('請輸入手機號');
return false;
//手機號正則
}else if(!(/^1[3456789]\d{9}$/.test(phone))) {
//com.prompt('手機號格式錯誤');
$('#yaerror').show();
$('#yaerror span').html('手機號格式錯誤');
return false;
}
return true;
}

//手機驗證碼
function checkSmsCode(){
var smsCode = $.trim($('#smsCode').val());
if (smsCode == null || smsCode == "") {
if(parent.location.href.indexOf('reg') >= 0){
// com.prompt('請輸入驗證碼');
$('#yaerror').show();
$('#yaerror span').html('請輸入驗證碼');
}else{
// com.prompt('請輸入驗證碼');
$('#yaerror').show();
$('#yaerror span').html('請輸入驗證碼');
}
return false;
}
return true;
}
//發送簡訊驗證碼
$(".send-sms").click(function(){
var mobile = $.trim($('#t_code').val());
//console.log(typeof mobile);

if(!mobile){
// com.prompt("請輸入手機號");
return false;
}
if(!checkPhone()){
return false;
}

send_login_code(mobile);
});
//獲取驗證碼倒計時1分鐘
function fn_daoshu(){
$(".daoshu").show();
daoshu -- ;
$(".daoshu").text(daoshu +'s');
if(daoshu == 0){
clear_Inter();
}
}
//清楚定時器
function clear_Inter(){
daoshu = 60;
$(".daoshu").text('60s').hide();
clearInterval(timer);
}
//發送簡訊驗證碼
function send_login_code(mobile)
{

$(".daoshu").show();
var code;
if($("#get_code").css("display") == 'none'){
code = 'is_empty';
}else {
if($('#yz_code').val() == ''){
com.prompt('請輸入圖形驗證碼');
return false;
}
code = $('#yz_code').val();
}
timer = setInterval(fn_daoshu,1000);
$("#smsCode").attr("disabled" , false);
$("#smsCode").attr("disabled" , false);
$.ajax({
type:"POST",
url:com.url.get_sms_code,
data:{
mobile: mobile,
},
datatype: "json",
success:function(res){
if(res.status == 'true'){
com.prompt("發送成功");
// $('#yaerror').show();
// $('#yaerror span').html('發送成功！');
}else{
com.prompt(res.info);
clear_Inter();
return false;
}
},
error: function(res){
//com.prompt('請重新獲取');
$('#yaerror').show();
$('#yaerror span').html('請重新獲取');
clear_Inter();
return false;
// console.log(res)
}
});
}

//用戶名
$("#t_usrname").focus(function(){
if($(this).val().length>0){
$('#userdelIco').show();
}

})
$("#t_usrname").blur(function(){
var username = $('#t_usrname').val();
if(username == '') return false;
//只能輸入中文 英文 和空格
var reg =/^[a-zA-Z\u4e00-\u9fa5\s ]{1,20}$/;
if(!(reg.test(username))) {
//com.prompt('姓名格式不正確');
$('#yaerror').show();
$('#yaerror span').html('姓名格式不正確');
return false;
}
// $('#userdelIco').hide();
return true;
});

//手機驗證碼
function t_usrname(){
var username = $('#t_usrname').val();
var reg =/^[a-zA-Z\u4e00-\u9fa5\s ]{1,20}$/;
if(username == null || username == "") {
return true;
}else if(username!=''){
if(!(reg.test(username))) {
//com.prompt('姓名格式不正確');
$('#yaerror').show();
$('#yaerror span').html('姓名格式不正確');
return false;
}
}
return true;
}
$('#t_usrname').on("input",function(){
var username = $.trim($('#t_usrname').val());
if(username.length>0){
$(this).parent('.posiv').siblings('.delico').show();
$(this).parent('.posiv').siblings('.delico').click;
}
})
//手機號焦點校驗
$('#t_code').on("focus",function(){
if($(this).val().length>0){
$('#teldelIco').show();
}
//已登錄狀態
if(parseInt(is_login)>'0' && parseInt(need_bind_mobie)>'1') {
$('#seleid').show(400);
$('#seleid').html(need_bind_mobie)
document.querySelector('#seleid').onclick=showMobile;
}else{

$('.flp.vufk').show();
}
})
function showMobile(){
$('#t_code').val(this.innerHTML)
$('#seleid').hide();
$('.flp.vufk').hide(400);
$('#yaerror').hide();
}
//已登錄
if(parseInt(is_login)>'0' && parseInt(need_bind_mobie)>'1'){
$('#tel_msg').click(function() {
var phone = $.trim($('#t_code').val());//手機號
var user_name = $.trim($("#t_usrname").val());//用戶名
var source = $.trim($("#source").val()); //暫時寫死
//換號了
if(phone!=need_bind_mobie){
console.log('換號了')
$('#yusuc').hide();
$('.flp.vufk').show(400);
$('#sendSms_Box').show();
noLogin();
}else{
$('.flp.vufk').hide(400);
console.log('沒換號')
//沒換號
var userInfo = {
user_name: user_name,
mobile: phone, //手機號
source:source,
pf_source:2,
ip: returnCitySN["cip"]

};
if(!t_usrname()){
return false;
}
if(!checkPhone()){
return false;
}

sendApiData({reg_source:userInfo.source,mobile:userInfo.mobile,name:userInfo.user_name,pf_source:2,ip: returnCitySN["cip"]});
}
})
}else{
console.log('沒登錄')
$('.flp.vufk').show();
$('#tel_msg').click(function(){
//沒登錄
noLogin();
})
}
//手機號失焦校驗
$('#t_code').blur(function(){
if(!checkPhone()){
return false;
}
})
//正在輸入檢驗
$('#t_code').on("input",function(){
var phoneNumber = $.trim($('#t_code').val());
if(parseInt(is_login)>'0' && parseInt(need_bind_mobie)>'1'){
if(phoneNumber!=need_bind_mobie){
$('#seleid').hide();
$('.flp.vufk').show(400);
}
if(phoneNumber==need_bind_mobie){
$('.flp.vufk').hide(400);
}
}else {
$('.flp.vufk').show();
}


if(phoneNumber.length>0){
$(this).parent('.posiv').siblings('.delico').show();
$(this).parent('.posiv').siblings('.delico').click;
}
var phone = document.getElementById('t_code').value;
var smsCode = $.trim($('#smsCode').val());
if (phoneNumber == null || phoneNumber == "") {
$(this).parent('.posiv').siblings('.delico').hide();
$(".send-sms").css({"background":"#eee","color":"#999"});
// $(".send-sms").attr('disabled','disabled');
return false;
//手機號正則
}else if(!(/^1[3456789]\d{9}$/.test(phone))) {
$(".send-sms").css({"background":"#eee","color":"#999"});
return false;
}
$(".send-sms").css({"background":"#ff5922","color":"#fff"});
$(".send-sms.dbing").css({"background":"#b41f5e","color":"#fff"});
$('#yaerror').hide();
$('#yaerror span').html('');
$('.flp.vufk').show();
})
$('#userdelIco').click(function(){
$(this).siblings('.posiv').find('.ptxt').val('');
// $('#t_usrname').val('');
clear_Inter();
$(this).hide();
$('.test_required').hide();
if($('#yaerror span').html()=='姓名格式不正確'){
$('#yaerror').hide();
if(!checkPhone()){
return false;
}
}
})

$('#teldelIco').click(function(){
$(this).siblings('.posiv').find('.ptxt').val('');
$(".send-sms").css({"background":"#eee","color":"#999"});
$("#smsCode").attr('disabled','disabled').val('');
clear_Inter();
$(this).hide();
$('.test_required').hide();
if($('#yaerror span').html()=='手機號格式錯誤'){
$('#yaerror').hide();
}
if($('#yaerror span').html()=='請輸入驗證碼'){
$('#yaerror').hide();
}
if($('#yaerror span').html()=='驗證碼錯誤'){
$('#yaerror').hide();
}
})

//沒登錄做驗證
function noLogin(){
var phone = $.trim($('#t_code').val());
var source = $.trim($("#source").val()); //暫時寫死
var yz_code = $.trim($('#smsCode').val());
var user_name =$.trim($("#t_usrname").val());
var userInfo = {
user_name:user_name,
mobile : phone, //手機號
code : yz_code , //驗證碼
source : source //來源渠道
};
if(!t_usrname()){
return false;
}
if(!checkPhone()){
return false;
}
if(!checkSmsCode()){
return false;
}
mobile_submit(userInfo);
}

//手機號登陸start
function mobile_submit(userInfo){
$.ajax({
type:"POST",
url: com.url.check_sms_code,
data:{
user_name:userInfo.user_name,
mobile : userInfo.mobile,
code : userInfo.code,
source : userInfo.source
},
dataType: 'json',
success: function(res){
if(res.status == 'true'){
// com.prompt('已提交');
$('#yaerror').show();
$('#yaerror span').html('已提交');
$('#t_code').val('');
$('#t_usrname').val('');
clear_Inter();
$("#smsCode").attr('disabled','disabled').val('');
$(".send-sms").css({"background":"#eee","color":"#999"});
$('.delico').hide();
$('#yaerror').hide();
$('#yaerror').html('');

sendApiData({reg_source:userInfo.source,mobile:userInfo.mobile,name:userInfo.user_name,pf_source:2,ip: returnCitySN["cip"]});

$('#yusuc').show();
$('#sendSms_Box').hide();
$('.module_10 .sendheight').css('height','14rem');
$('.pic_online10').css('height','17rem');
$('.ddt.last_getUser').css('height','11rem');
$('.No9,.last_getUser.fsd').css('height','12rem');
$('.index_apply .twrap06').css('height','12.3rem');

}else{
//com.prompt("驗證碼錯誤");
$('#yaerror').show();
$('#yaerror span').html('驗證碼錯誤');
}
},
error: function(res){
// com.prompt('請重新提交');
$('#yaerror').show();
$('#yaerror span').html('請重新提交！');
// console.log(res)
}
})
}

//手機號登陸start，最終提交代碼
function sendApiData(userInfo){
$.ajax({
type:"GET",
url: ucse_host+'/xuemao/formcollection/save_form_data.json',
data:userInfo,
xhrFields: {
withCredentials: true
},
dataType: 'json',
success: function(res){
if(res.result == 'succ'){
$('#yusuc').show();
$('#sendSms_Box').hide();
$('.module_10 .sendheight').css('height','14rem');
$('.pic_online10').css('height','17rem');
$('.ddt.last_getUser').css('height','11rem');
$('.No9,.last_getUser.fsd').css('height','12rem');
$('.index_apply .twrap06').css('height','12.3rem');

}else{
//com.prompt("驗證碼錯誤");
$('#yaerror').show();
$('.vufk .error').show();
}
},
error: function(res){
//com.prompt('請重新提交');
$('#yaerror').show();
$('#yaerror span').html('請重新提交');

// console.log(res)
}
})
}
//點擊其他位置隱藏
$('body').click(function(e) {
var target = $(e.target);
if(!target.is('#t_code') && !target.is('#seleid')) {
$('#seleid').hide();
}
});

$('body').click(function(e) {
var target = $(e.target);
if(!target.is('#t_usrname')) {
$('#userdelIco').hide();
}
});
$('body').click(function(e) {
var target = $(e.target);
if(!target.is('#t_code')) {
$('#teldelIco').hide();
}
});
})

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Git強制覆蓋master分支
    在開發中，通常會保持兩個分支master分支和develop分支，但是如果因為develop上面迭代太多而沒有及時維護master，最後想丟棄master而直接將測試確認過的develop強推到master，該怎麼操作呢？ 網上搜了一下，但是真正自己使用起來卻又暴露出各種問題。因此，做如下總結分享， ...
  • 柱狀圖多系列php動態實現（ec）
    ` ` ...
  • vue element-ui 文件上傳
    js 介面： 調用： 具體詳見官方api,很詳細 http://element.eleme.io/#/zh-CN/component/upload#attribute ...
  • Blob, Uint8Aray, atob/btoa in lt IE9 browser
    Blob, Uint8Aray, atob/btoa in lt IE9 browser ...
  • 用Electron開發企業網盤之分片下載（一）--通信
    效果展示 項目背景： 由於瀏覽器的限制，web批量下載體驗不好以及無法下載文件夾。採用Electron技術，通過js開發PC應用程式，著力解決批量下載、斷點續傳、文件夾下載等問題。配合網頁版網盤使用，單個小文件使用瀏覽器內置下載，單個大文件、多文件、文件夾調用PC應用程式，提升下載體驗。 技術棧 E ...
  • vue中刷新頁面時去閃爍，提升體驗方法
    首先在最外層div添加v-if="isReloadAlive"，並創建變數isReloadAlive = true 隨後添加provide()以及reload方法，如下： export default { provide() { return { reload: this.reload } }, d ...
  • 圖學ES6-6.數值的擴展
    ...
  • vue-route-transition路由前進後退動畫
    vue route transition vue router 切換動畫 特性 模擬前進後退動畫 基於css3流暢動畫 基於sessionStorage，頁面刷新不影響路由記錄 路由懶載入，返回可記錄滾動條位置 前進後退的判斷與路由路徑規則無關 支持任意基於Vue的UI框架 demo 手機掃碼 "在 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類