驗證碼案例大全
1. 常規隨機字母驗證 2. 3. <script type="text/javascript"> 4. var code; 5. function createCode() 6. { 7. code = ""; 8. var codeLength = 6; //驗證碼的長度 9. var checkCode = document.getElementById("checkCode"); 10. var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11. 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z', 12. 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //全部候選組成驗證碼的字符，固然也能夠用中文的 13. for(var i = 0; i < codeLength; i++) 14. { 15. var charNum = Math.floor(Math.random() * 52); 16. code += codeChars[charNum]; 17. } 18. if(checkCode) 19. { 20. checkCode.className = "code"; 21. checkCode.innerHTML = code; 22. } 23. } 24. function validateCode() 25. { 26. var inputCode=document.getElementById("inputCode").value; 27. if(inputCode.length <= 0) 28. { 29. alert("請輸入驗證碼！"); 30. } 31. else if(inputCode.toUpperCase() != code.toUpperCase()) 32. { 33. alert("驗證碼輸入有誤！"); 34. createCode(); 35. } 36. else 37. { 38. alert("驗證碼正確！"); 39. } 40. } 41. </script> ------------------------------------------------------------------------------------------------------------------------ 1. 常規的數字加減驗證 2. 3. var code ; //在全局定義驗證碼 4. //產生驗證碼 5. window.onload = function createCode(){ 6. code = ""; 7. var codeLength = 4;//驗證碼的長度 8. var checkCode = document.getElementById("code"); 9. var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 10. 'S','T','U','V','W','X','Y','Z');//隨機數 11. for(var i = 0; i < codeLength; i++) {//循環操做 12. var index = Math.floor(Math.random()*36);//取得隨機數的索引（0~35） 13. code += random[index];//根據索引取得隨機數加到code上 14. } 15. checkCode.value = code;//把code值賦給驗證碼 16. } 17. //校驗驗證碼 18. function validate(){ 19. var inputCode = document.getElementById("input").value.toUpperCase(); //取得輸入的驗證碼並轉化爲大寫 20. if(inputCode.length <= 0) { //若輸入的驗證碼長度爲0 21. alert("請輸入驗證碼！"); //則彈出請輸入驗證碼 22. } 23. else if(inputCode != code ) { //若輸入的驗證碼與產生的驗證碼不一致時 24. alert("驗證碼輸入錯誤！@_@"); //則彈出驗證碼輸入錯誤 25. createCode();//刷新驗證碼 26. document.getElementById("input").value = "";//清空文本框 27. } 28. else { //輸入正確時 29. alert("^-^"); //彈出^-^ 30. } 31. } 前端實現僞驗證：數字加減 - <script type="text/javascript" language="javascript"> - - function getverifycode(){ - var i = parseInt(10 * Math.random()); - var j = parseInt(10 * Math.random()); - var k = i + j; - $("#hiddencode").val(k); - $("#showspan").html(" " + i + " + " + j + " = "); - } - - function getverifycodeChange(){ - var i = parseInt(10 * Math.random()); - var j = parseInt(10 * Math.random()); - var k = i + j; - $("#hiddencode").val(k); - $("#showspan").html(" " + i + " + " + j + " = "); - $("#verifycode").focus(); - }</script> 短信驗證 短信驗證以前必需要確認如下四點樣式及其展現方式 1.點擊獲取驗證碼以前的樣式： 2.輸入正確的手機號後點擊獲取驗證碼以後的樣式 3.若是手機號已經被註冊的樣式： 4.若是一個手機號一天發送超過3次就提示不能發送： 短信驗證的JS腳本 - var InterValObj; //timer變量，控制時間 - var count = 120; //間隔函數，1秒執行 - var curCount;//當前剩餘秒數 - var code = ""; //驗證碼 - var codeLength = 6;//驗證碼長度 - - function sendMessage() { - curCount = count; - var jbPhone = $("#jbPhone").val(); - var jbPhoneTip = $("#jbPhoneTip").text(); - if (jbPhone != "") { - if(jbPhoneTip == "√ 該手機號碼能夠註冊，輸入正確" || jbPhoneTip == "√ 短信驗證碼已發到您的手機,請查收"){ - // 產生驗證碼 - for ( var i = 0; i < codeLength; i++) { - code += parseInt(Math.random() * 9).toString(); - } - // 設置button效果，開始計時 - $("#btnSendCode").attr("disabled", "true"); - $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼"); - InterValObj = window.setInterval(SetRemainTime, 1000); // 啓動計時器，1秒執行一次 - // 向後臺發送處理數據 - $.ajax({ - type: "POST", // 用POST方式傳輸 - dataType: "text", // 數據格式:JSON - url: "UserAction_sms.action", // 目標地址 - data: "jbPhone=" + jbPhone +"&code=" + code, - error: function (XMLHttpRequest, textStatus, errorThrown) { - - }, - success: function (data){ - data = parseInt(data, 10); - if(data == 1){ - $("#jbPhoneTip").html("<font color='#339933'>√ 短信驗證碼已發到您的手機,請查收</font>"); - }else if(data == 0){ - $("#jbPhoneTip").html("<font color='red'>× 短信驗證碼發送失敗，請從新發送</font>"); - }else if(data == 2){ - $("#jbPhoneTip").html("<font color='red'>× 該手機號碼今天發送驗證碼過多</font>"); - } - } - }); - } - }else{ - $("#jbPhoneTip").html("<font color='red'>× 手機號碼不能爲空</font>"); - } - } - - //timer處理函數 - function SetRemainTime() { - if (curCount == 0) { - window.clearInterval(InterValObj);// 中止計時器 - $("#btnSendCode").removeAttr("disabled");// 啓用按鈕 - $("#btnSendCode").val("從新發送驗證碼"); - code = ""; // 清除驗證碼。若是不清除，過期間後，輸入收到的驗證碼依然有效 - }else { - curCount--; - $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼"); - } - } - - $(document).ready(function() { - $("#SmsCheckCode").blur(function() { - var SmsCheckCodeVal = $("#SmsCheckCode").val(); - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkCode.action", - data : {SmsCheckCode : SmsCheckCodeVal}, - type : "POST", - dataType : "text", - success : function(data) { - data = parseInt(data, 10); - if (data == 1) { - $("#SmsCheckCodeTip").html("<font color='#339933'>√ 短信驗證碼正確，請繼續</font>"); - } else { - $("#SmsCheckCodeTip").html("<font color='red'>× 短信驗證碼有誤，請覈實後從新填寫</font>"); - } - } - }); - }); - }); ----------------------------------------------------------------------------------------------------------------------- - function trim(str) { - var strnew = str.replace(/^\s*|\s*$/g, ""); - return strnew; - } - //用戶名 - function checkusername() { - var username = document.form1.username.value; - if (username == "" || !isNaN(username.charAt(0))) { - document.getElementById("usernameTip").innerHTML = "<font color='red'>× 首字母不能爲數字或者用戶名不能爲空</font>"; - return false; - } else if (username.length < 6 || username.length > 30) { - document.getElementById("usernameTip").innerHTML = "<font color='red'>× 用戶名長度爲6-30位字符</font>"; - return false; - } else { - document.getElementById("usernameTip").innerHTML = "<font color='#339933'>√ 用戶名合格</font>"; - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkUserName.action",// 目標地址 - data : {username : username}, // 目標參數 - type : "POST", // 用POST方式傳輸 - dataType : "text", // 數據格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#usernameTip").html("<font color='red'>× 該用戶名已經被註冊，請從新輸入</font>"); - } else { - $("#usernameTip").html("<font color='#339933'>√ 該用戶名能夠註冊，輸入正確</font>"); - } - } - }); - return true; - } - } - // 登陸密碼 - function checkpassword() { - var password = document.form1.password.value; - if (password.length < 6 || password.length > 30) { - document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密碼長度不能小於6位，大於30位</font>"; - return false; - } else if (!isNaN(password)) { - document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密碼不能全是數字</font>"; - return false; - } else { - document.getElementById("passwordTip").innerHTML = "<font color='#339933'>√ 密碼合格</font>"; - return true; - } - } - // 確認密碼 - function checkpasswrodb() { - var password = document.form1.password.value; - var passwordRepeat = document.form1.passwordRepeat.value; - if (trim(password) != trim(passwordRepeat)) { - document.getElementById("passwordRepeatTip").innerHTML = "<font color='red'>× 兩次密碼輸入必須一致</font>"; - return false; - } else { - document.getElementById("passwordRepeatTip").innerHTML = "<font color='#339933'>√ 密碼輸入一致</font>"; - return true; - } - } - // 姓名 - function checknickname() { - var nickname = document.form1.nickname.value; - if (trim(nickname) == "") { - document.getElementById("nicknameTip").innerHTML = "<font color='red'>× 姓名不能爲空</font>"; - return false; - } else { - document.getElementById("nicknameTip").innerHTML = "<font color='#339933'>√ 姓名輸入正確</font>"; - return true; - } - } - // 聯繫手機(ajax驗證手機號碼是否已經存在) - function checkjbPhone() { - var jbPhone = document.form1.jbPhone.value; - var re= /(^1[3|5|8][0-9]{9}$)/; - if (trim(jbPhone) == "") { - document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 手機號碼不能爲空</font>"; - return false; - } else if(trim(jbPhone) != ""){ - if(!re.test(jbPhone)){ - document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 請輸入有效的手機號碼</font>"; - return false; - }else{ - document.getElementById("jbPhoneTip").innerHTML = "<font color='#339933'>√ 手機號碼輸入正確</font>"; - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkPhone.action",// 目標地址 - data : {jbPhone : jbPhone}, // 目標參數 - type : "POST", // 用POST方式傳輸 - dataType : "text", // 數據格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#jbPhoneTip").html("<font color='red'>× 該手機號碼已經被註冊，請從新輸入</font>"); - } else { - $("#jbPhoneTip").html("<font color='#339933'>√ 該手機號碼能夠註冊，輸入正確</font>"); - } - } - }); - return true; - } - } - - } - // 證件號碼 - function checkjbCredentialsCode() { - var jbCredentialsCode = document.form1.jbCredentialsCode.value; - var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; - if (trim(jbCredentialsCode) == "") { - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 證件號碼不能爲空</font>"; - return false; - } else if(trim(jbCredentialsCode) != ""){ - if(!reg.test(jbCredentialsCode)){ - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 請輸入合法的證件號碼</font>"; - return false; - }else{ - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='#339933'>√ 證件號碼輸入正確</font>"; - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkCredentialsCode.action",// 目標地址 - data : {jbCredentialsCode : jbCredentialsCode}, // 目標參數 - type : "POST", // 用POST方式傳輸 - dataType : "text", // 數據格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#jbCredentialsCodeTip").html("<font color='red'>× 該證件號碼已經被註冊，請從新輸入</font>"); - } else { - $("#jbCredentialsCodeTip").html("<font color='#339933'>√ 該證件號碼能夠註冊，輸入正確</font>"); - } - } - }); - return true; - } - } - } - // 所在地區 - function checkjbSourceArea() { - var jbSourceArea = document.form1.jbSourceArea.value; - if (trim(jbSourceArea) == "") { - document.getElementById("jbSourceAreaTip").innerHTML = "<font color='red'>× 請選擇所在地區</font>"; - return false; - } else { - document.getElementById("jbSourceAreaTip").innerHTML = "<font color='#339933'>√ 所在地區選擇正確</font>"; - return true; - } - } - // 驗證碼 - function checkNumber() { - var checkNum = document.form1.checkNum.value; - if (trim(checkNum) == "") { - document.getElementById("checkNumTip").innerHTML = "<font color='red'>× 驗證碼不能爲空</font>"; - return false; - } else { - document.getElementById("checkNumTip").innerHTML = "<font color='#339933'>√ 驗證碼合格</font>"; - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkNum.action",// 目標地址 - data : {checkNum : checkNum}, // 目標參數 - type : "POST", // 用POST方式傳輸 - dataType : "text", // 數據格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#checkNumTip").html("<font color='red'>× 驗證碼錯誤</font>"); - } else { - $("#checkNumTip").html("<font color='#339933'>√ 驗證碼正確</font>"); - } - } - }); - return true; - } - } 3、後臺調用短信驗證平臺或者第三方公司爲咱們體統的驗證方法去驗證。
1. 常規隨機字母驗證 2. 3. <script type="text/javascript"> 4. var code; 5. function createCode() 6. { 7. code = ""; 8. var codeLength = 6; //驗證碼的長度 9. var checkCode = document.getElementById("checkCode"); 10. var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 11. 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z', 12. 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //全部候選組成驗證碼的字符，固然也能夠用中文的 13. for(var i = 0; i < codeLength; i++) 14. { 15. var charNum = Math.floor(Math.random() * 52); 16. code += codeChars[charNum]; 17. } 18. if(checkCode) 19. { 20. checkCode.className = "code"; 21. checkCode.innerHTML = code; 22. } 23. } 24. function validateCode() 25. { 26. var inputCode=document.getElementById("inputCode").value; 27. if(inputCode.length <= 0) 28. { 29. alert("請輸入驗證碼！"); 30. } 31. else if(inputCode.toUpperCase() != code.toUpperCase()) 32. { 33. alert("驗證碼輸入有誤！"); 34. createCode(); 35. } 36. else 37. { 38. alert("驗證碼正確！"); 39. } 40. } 41. </script> ------------------------------------------------------------------------------------------------------------------------ 1. 常規的數字加減驗證 2. 3. var code ; //在全局定義驗證碼 4. //產生驗證碼 5. window.onload = function createCode(){ 6. code = ""; 7. var codeLength = 4;//驗證碼的長度 8. var checkCode = document.getElementById("code"); 9. var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 10. 'S','T','U','V','W','X','Y','Z');//隨機數 11. for(var i = 0; i < codeLength; i++) {//循環操做 12. var index = Math.floor(Math.random()*36);//取得隨機數的索引（0~35） 13. code += random[index];//根據索引取得隨機數加到code上 14. } 15. checkCode.value = code;//把code值賦給驗證碼 16. } 17. //校驗驗證碼 18. function validate(){ 19. var inputCode = document.getElementById("input").value.toUpperCase(); //取得輸入的驗證碼並轉化爲大寫 20. if(inputCode.length <= 0) { //若輸入的驗證碼長度爲0 21. alert("請輸入驗證碼！"); //則彈出請輸入驗證碼 22. } 23. else if(inputCode != code ) { //若輸入的驗證碼與產生的驗證碼不一致時 24. alert("驗證碼輸入錯誤！@_@"); //則彈出驗證碼輸入錯誤 25. createCode();//刷新驗證碼 26. document.getElementById("input").value = "";//清空文本框 27. } 28. else { //輸入正確時 29. alert("^-^"); //彈出^-^ 30. } 31. } 前端實現僞驗證：數字加減 - <script type="text/javascript" language="javascript"> - - function getverifycode(){ - var i = parseInt(10 * Math.random()); - var j = parseInt(10 * Math.random()); - var k = i + j; - $("#hiddencode").val(k); - $("#showspan").html(" " + i + " + " + j + " = "); - } - - function getverifycodeChange(){ - var i = parseInt(10 * Math.random()); - var j = parseInt(10 * Math.random()); - var k = i + j; - $("#hiddencode").val(k); - $("#showspan").html(" " + i + " + " + j + " = "); - $("#verifycode").focus(); - }</script> 短信驗證 短信驗證以前必需要確認如下四點樣式及其展現方式 1.點擊獲取驗證碼以前的樣式： 2.輸入正確的手機號後點擊獲取驗證碼以後的樣式 3.若是手機號已經被註冊的樣式： 4.若是一個手機號一天發送超過3次就提示不能發送： 短信驗證的JS腳本 - var InterValObj; //timer變量，控制時間 - var count = 120; //間隔函數，1秒執行 - var curCount;//當前剩餘秒數 - var code = ""; //驗證碼 - var codeLength = 6;//驗證碼長度 - - function sendMessage() { - curCount = count; - var jbPhone = $("#jbPhone").val(); - var jbPhoneTip = $("#jbPhoneTip").text(); - if (jbPhone != "") { - if(jbPhoneTip == "√ 該手機號碼能夠註冊，輸入正確" || jbPhoneTip == "√ 短信驗證碼已發到您的手機,請查收"){ - // 產生驗證碼 - for ( var i = 0; i < codeLength; i++) { - code += parseInt(Math.random() * 9).toString(); - } - // 設置button效果，開始計時 - $("#btnSendCode").attr("disabled", "true"); - $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼"); - InterValObj = window.setInterval(SetRemainTime, 1000); // 啓動計時器，1秒執行一次 - // 向後臺發送處理數據 - $.ajax({ - type: "POST", // 用POST方式傳輸 - dataType: "text", // 數據格式:JSON - url: "UserAction_sms.action", // 目標地址 - data: "jbPhone=" + jbPhone +"&code=" + code, - error: function (XMLHttpRequest, textStatus, errorThrown) { - - }, - success: function (data){ - data = parseInt(data, 10); - if(data == 1){ - $("#jbPhoneTip").html("<font color='#339933'>√ 短信驗證碼已發到您的手機,請查收</font>"); - }else if(data == 0){ - $("#jbPhoneTip").html("<font color='red'>× 短信驗證碼發送失敗，請從新發送</font>"); - }else if(data == 2){ - $("#jbPhoneTip").html("<font color='red'>× 該手機號碼今天發送驗證碼過多</font>"); - } - } - }); - } - }else{ - $("#jbPhoneTip").html("<font color='red'>× 手機號碼不能爲空</font>"); - } - } - - //timer處理函數 - function SetRemainTime() { - if (curCount == 0) { - window.clearInterval(InterValObj);// 中止計時器 - $("#btnSendCode").removeAttr("disabled");// 啓用按鈕 - $("#btnSendCode").val("從新發送驗證碼"); - code = ""; // 清除驗證碼。若是不清除，過期間後，輸入收到的驗證碼依然有效 - }else { - curCount--; - $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼"); - } - } - - $(document).ready(function() { - $("#SmsCheckCode").blur(function() { - var SmsCheckCodeVal = $("#SmsCheckCode").val(); - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkCode.action", - data : {SmsCheckCode : SmsCheckCodeVal}, - type : "POST", - dataType : "text", - success : function(data) { - data = parseInt(data, 10); - if (data == 1) { - $("#SmsCheckCodeTip").html("<font color='#339933'>√ 短信驗證碼正確，請繼續</font>"); - } else { - $("#SmsCheckCodeTip").html("<font color='red'>× 短信驗證碼有誤，請覈實後從新填寫</font>"); - } - } - }); - }); - }); ----------------------------------------------------------------------------------------------------------------------- - function trim(str) { - var strnew = str.replace(/^\s*|\s*$/g, ""); - return strnew; - } - //用戶名 - function checkusername() { - var username = document.form1.username.value; - if (username == "" || !isNaN(username.charAt(0))) { - document.getElementById("usernameTip").innerHTML = "<font color='red'>× 首字母不能爲數字或者用戶名不能爲空</font>"; - return false; - } else if (username.length < 6 || username.length > 30) { - document.getElementById("usernameTip").innerHTML = "<font color='red'>× 用戶名長度爲6-30位字符</font>"; - return false; - } else { - document.getElementById("usernameTip").innerHTML = "<font color='#339933'>√ 用戶名合格</font>"; - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkUserName.action",// 目標地址 - data : {username : username}, // 目標參數 - type : "POST", // 用POST方式傳輸 - dataType : "text", // 數據格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#usernameTip").html("<font color='red'>× 該用戶名已經被註冊，請從新輸入</font>"); - } else { - $("#usernameTip").html("<font color='#339933'>√ 該用戶名能夠註冊，輸入正確</font>"); - } - } - }); - return true; - } - } - // 登陸密碼 - function checkpassword() { - var password = document.form1.password.value; - if (password.length < 6 || password.length > 30) { - document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密碼長度不能小於6位，大於30位</font>"; - return false; - } else if (!isNaN(password)) { - document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密碼不能全是數字</font>"; - return false; - } else { - document.getElementById("passwordTip").innerHTML = "<font color='#339933'>√ 密碼合格</font>"; - return true; - } - } - // 確認密碼 - function checkpasswrodb() { - var password = document.form1.password.value; - var passwordRepeat = document.form1.passwordRepeat.value; - if (trim(password) != trim(passwordRepeat)) { - document.getElementById("passwordRepeatTip").innerHTML = "<font color='red'>× 兩次密碼輸入必須一致</font>"; - return false; - } else { - document.getElementById("passwordRepeatTip").innerHTML = "<font color='#339933'>√ 密碼輸入一致</font>"; - return true; - } - } - // 姓名 - function checknickname() { - var nickname = document.form1.nickname.value; - if (trim(nickname) == "") { - document.getElementById("nicknameTip").innerHTML = "<font color='red'>× 姓名不能爲空</font>"; - return false; - } else { - document.getElementById("nicknameTip").innerHTML = "<font color='#339933'>√ 姓名輸入正確</font>"; - return true; - } - } - // 聯繫手機(ajax驗證手機號碼是否已經存在) - function checkjbPhone() { - var jbPhone = document.form1.jbPhone.value; - var re= /(^1[3|5|8][0-9]{9}$)/; - if (trim(jbPhone) == "") { - document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 手機號碼不能爲空</font>"; - return false; - } else if(trim(jbPhone) != ""){ - if(!re.test(jbPhone)){ - document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 請輸入有效的手機號碼</font>"; - return false; - }else{ - document.getElementById("jbPhoneTip").innerHTML = "<font color='#339933'>√ 手機號碼輸入正確</font>"; - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkPhone.action",// 目標地址 - data : {jbPhone : jbPhone}, // 目標參數 - type : "POST", // 用POST方式傳輸 - dataType : "text", // 數據格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#jbPhoneTip").html("<font color='red'>× 該手機號碼已經被註冊，請從新輸入</font>"); - } else { - $("#jbPhoneTip").html("<font color='#339933'>√ 該手機號碼能夠註冊，輸入正確</font>"); - } - } - }); - return true; - } - } - - } - // 證件號碼 - function checkjbCredentialsCode() { - var jbCredentialsCode = document.form1.jbCredentialsCode.value; - var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; - if (trim(jbCredentialsCode) == "") { - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 證件號碼不能爲空</font>"; - return false; - } else if(trim(jbCredentialsCode) != ""){ - if(!reg.test(jbCredentialsCode)){ - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 請輸入合法的證件號碼</font>"; - return false; - }else{ - document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='#339933'>√ 證件號碼輸入正確</font>"; - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkCredentialsCode.action",// 目標地址 - data : {jbCredentialsCode : jbCredentialsCode}, // 目標參數 - type : "POST", // 用POST方式傳輸 - dataType : "text", // 數據格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#jbCredentialsCodeTip").html("<font color='red'>× 該證件號碼已經被註冊，請從新輸入</font>"); - } else { - $("#jbCredentialsCodeTip").html("<font color='#339933'>√ 該證件號碼能夠註冊，輸入正確</font>"); - } - } - }); - return true; - } - } - } - // 所在地區 - function checkjbSourceArea() { - var jbSourceArea = document.form1.jbSourceArea.value; - if (trim(jbSourceArea) == "") { - document.getElementById("jbSourceAreaTip").innerHTML = "<font color='red'>× 請選擇所在地區</font>"; - return false; - } else { - document.getElementById("jbSourceAreaTip").innerHTML = "<font color='#339933'>√ 所在地區選擇正確</font>"; - return true; - } - } - // 驗證碼 - function checkNumber() { - var checkNum = document.form1.checkNum.value; - if (trim(checkNum) == "") { - document.getElementById("checkNumTip").innerHTML = "<font color='red'>× 驗證碼不能爲空</font>"; - return false; - } else { - document.getElementById("checkNumTip").innerHTML = "<font color='#339933'>√ 驗證碼合格</font>"; - // 向後臺發送處理數據 - $.ajax({ - url : "UserAction_checkNum.action",// 目標地址 - data : {checkNum : checkNum}, // 目標參數 - type : "POST", // 用POST方式傳輸 - dataType : "text", // 數據格式:text - success : function(data) { - data = parseInt(data, 10); - if (data != 0) { - $("#checkNumTip").html("<font color='red'>× 驗證碼錯誤</font>"); - } else { - $("#checkNumTip").html("<font color='#339933'>√ 驗證碼正確</font>"); - } - } - }); - return true; - } - } 3、後臺調用短信驗證平臺或者第三方公司爲咱們體統的驗證方法去驗證。
- 常規隨機字母驗證
- <script type="text/javascript">
- var code;
- function createCode()
- {
- code = "";
- var codeLength = 6; //驗證碼的長度
- var checkCode = document.getElementById("checkCode");
- var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
- 'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
- 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //全部候選組成驗證碼的字符，固然也能夠用中文的
- for(var i = 0; i < codeLength; i++)
- {
- var charNum = Math.floor(Math.random() * 52);
- code += codeChars[charNum];
- }
- if(checkCode)
- {
- checkCode.className = "code";
- checkCode.innerHTML = code;
- }
- }
- function validateCode()
- {
- var inputCode=document.getElementById("inputCode").value;
- if(inputCode.length <= 0)
- {
- alert("請輸入驗證碼！");
- }
- else if(inputCode.toUpperCase() != code.toUpperCase())
- {
- alert("驗證碼輸入有誤！");
- createCode();
- }
- else
- {
- alert("驗證碼正確！");
- }
- }
- </script>
------------------------------------------------------------------------------------------------------------------------
短信驗證以前必需要確認如下四點樣式及其展現方式
1.點擊獲取驗證碼以前的樣式：
2.輸入正確的手機號後點擊獲取驗證碼以後的樣式
3.若是手機號已經被註冊的樣式：
4.若是一個手機號一天發送超過3次就提示不能發送：
短信驗證的JS腳本
- var InterValObj; //timer變量，控制時間
- var count = 120; //間隔函數，1秒執行
- var curCount;//當前剩餘秒數
- var code = ""; //驗證碼
- var codeLength = 6;//驗證碼長度
-
- function sendMessage() {
- curCount = count;
- var jbPhone = $("#jbPhone").val();
- var jbPhoneTip = $("#jbPhoneTip").text();
- if (jbPhone != "") {
- if(jbPhoneTip == "√ 該手機號碼能夠註冊，輸入正確" || jbPhoneTip == "√ 短信驗證碼已發到您的手機,請查收"){
- // 產生驗證碼
- for ( var i = 0; i < codeLength; i++) {
- code += parseInt(Math.random() * 9).toString();
- }
- // 設置button效果，開始計時
- $("#btnSendCode").attr("disabled", "true");
- $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");
- InterValObj = window.setInterval(SetRemainTime, 1000); // 啓動計時器，1秒執行一次
- // 向後臺發送處理數據
- $.ajax({
- type: "POST", // 用POST方式傳輸
- dataType: "text", // 數據格式:JSON
- url: "UserAction_sms.action", // 目標地址
- data: "jbPhone=" + jbPhone +"&code=" + code,
- error: function (XMLHttpRequest, textStatus, errorThrown) {
-
- },
- success: function (data){
- data = parseInt(data, 10);
- if(data == 1){
- $("#jbPhoneTip").html("<font color='#339933'>√ 短信驗證碼已發到您的手機,請查收</font>");
- }else if(data == 0){
- $("#jbPhoneTip").html("<font color='red'>× 短信驗證碼發送失敗，請從新發送</font>");
- }else if(data == 2){
- $("#jbPhoneTip").html("<font color='red'>× 該手機號碼今天發送驗證碼過多</font>");
- }
- }
- });
- }
- }else{
- $("#jbPhoneTip").html("<font color='red'>× 手機號碼不能爲空</font>");
- }
- }
-
- //timer處理函數
- function SetRemainTime() {
- if (curCount == 0) {
- window.clearInterval(InterValObj);// 中止計時器
- $("#btnSendCode").removeAttr("disabled");// 啓用按鈕
- $("#btnSendCode").val("從新發送驗證碼");
- code = ""; // 清除驗證碼。若是不清除，過期間後，輸入收到的驗證碼依然有效
- }else {
- curCount--;
- $("#btnSendCode").val("請在" + curCount + "秒內輸入驗證碼");
- }
- }
-
- $(document).ready(function() {
- $("#SmsCheckCode").blur(function() {
- var SmsCheckCodeVal = $("#SmsCheckCode").val();
- // 向後臺發送處理數據
- $.ajax({
- url : "UserAction_checkCode.action",
- data : {SmsCheckCode : SmsCheckCodeVal},
- type : "POST",
- dataType : "text",
- success : function(data) {
- data = parseInt(data, 10);
- if (data == 1) {
- $("#SmsCheckCodeTip").html("<font color='#339933'>√ 短信驗證碼正確，請繼續</font>");
- } else {
- $("#SmsCheckCodeTip").html("<font color='red'>× 短信驗證碼有誤，請覈實後從新填寫</font>");
- }
- }
- });
- });
- });
-----------------------------------------------------------------------------------------------------------------------
- function trim(str) {
- var strnew = str.replace(/^\s*|\s*$/g, "");
- return strnew;
- }
- //用戶名
- function checkusername() {
- var username = document.form1.username.value;
- if (username == "" || !isNaN(username.charAt(0))) {
- document.getElementById("usernameTip").innerHTML = "<font color='red'>× 首字母不能爲數字或者用戶名不能爲空</font>";
- return false;
- } else if (username.length < 6 || username.length > 30) {
- document.getElementById("usernameTip").innerHTML = "<font color='red'>× 用戶名長度爲6-30位字符</font>";
- return false;
- } else {
- document.getElementById("usernameTip").innerHTML = "<font color='#339933'>√ 用戶名合格</font>";
- // 向後臺發送處理數據
- $.ajax({
- url : "UserAction_checkUserName.action",// 目標地址
- data : {username : username}, // 目標參數
- type : "POST", // 用POST方式傳輸
- dataType : "text", // 數據格式:text
- success : function(data) {
- data = parseInt(data, 10);
- if (data != 0) {
- $("#usernameTip").html("<font color='red'>× 該用戶名已經被註冊，請從新輸入</font>");
- } else {
- $("#usernameTip").html("<font color='#339933'>√ 該用戶名能夠註冊，輸入正確</font>");
- }
- }
- });
- return true;
- }
- }
- // 登陸密碼
- function checkpassword() {
- var password = document.form1.password.value;
- if (password.length < 6 || password.length > 30) {
- document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密碼長度不能小於6位，大於30位</font>";
- return false;
- } else if (!isNaN(password)) {
- document.getElementById("passwordTip").innerHTML = "<font color='red'>× 密碼不能全是數字</font>";
- return false;
- } else {
- document.getElementById("passwordTip").innerHTML = "<font color='#339933'>√ 密碼合格</font>";
- return true;
- }
- }
- // 確認密碼
- function checkpasswrodb() {
- var password = document.form1.password.value;
- var passwordRepeat = document.form1.passwordRepeat.value;
- if (trim(password) != trim(passwordRepeat)) {
- document.getElementById("passwordRepeatTip").innerHTML = "<font color='red'>× 兩次密碼輸入必須一致</font>";
- return false;
- } else {
- document.getElementById("passwordRepeatTip").innerHTML = "<font color='#339933'>√ 密碼輸入一致</font>";
- return true;
- }
- }
- // 姓名
- function checknickname() {
- var nickname = document.form1.nickname.value;
- if (trim(nickname) == "") {
- document.getElementById("nicknameTip").innerHTML = "<font color='red'>× 姓名不能爲空</font>";
- return false;
- } else {
- document.getElementById("nicknameTip").innerHTML = "<font color='#339933'>√ 姓名輸入正確</font>";
- return true;
- }
- }
- // 聯繫手機(ajax驗證手機號碼是否已經存在)
- function checkjbPhone() {
- var jbPhone = document.form1.jbPhone.value;
- var re= /(^1[3|5|8][0-9]{9}$)/;
- if (trim(jbPhone) == "") {
- document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 手機號碼不能爲空</font>";
- return false;
- } else if(trim(jbPhone) != ""){
- if(!re.test(jbPhone)){
- document.getElementById("jbPhoneTip").innerHTML = "<font color='red'>× 請輸入有效的手機號碼</font>";
- return false;
- }else{
- document.getElementById("jbPhoneTip").innerHTML = "<font color='#339933'>√ 手機號碼輸入正確</font>";
- // 向後臺發送處理數據
- $.ajax({
- url : "UserAction_checkPhone.action",// 目標地址
- data : {jbPhone : jbPhone}, // 目標參數
- type : "POST", // 用POST方式傳輸
- dataType : "text", // 數據格式:text
- success : function(data) {
- data = parseInt(data, 10);
- if (data != 0) {
- $("#jbPhoneTip").html("<font color='red'>× 該手機號碼已經被註冊，請從新輸入</font>");
- } else {
- $("#jbPhoneTip").html("<font color='#339933'>√ 該手機號碼能夠註冊，輸入正確</font>");
- }
- }
- });
- return true;
- }
- }
-
- }
- // 證件號碼
- function checkjbCredentialsCode() {
- var jbCredentialsCode = document.form1.jbCredentialsCode.value;
- var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
- if (trim(jbCredentialsCode) == "") {
- document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 證件號碼不能爲空</font>";
- return false;
- } else if(trim(jbCredentialsCode) != ""){
- if(!reg.test(jbCredentialsCode)){
- document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='red'>× 請輸入合法的證件號碼</font>";
- return false;
- }else{
- document.getElementById("jbCredentialsCodeTip").innerHTML = "<font color='#339933'>√ 證件號碼輸入正確</font>";
- // 向後臺發送處理數據
- $.ajax({
- url : "UserAction_checkCredentialsCode.action",// 目標地址
- data : {jbCredentialsCode : jbCredentialsCode}, // 目標參數
- type : "POST", // 用POST方式傳輸
- dataType : "text", // 數據格式:text
- success : function(data) {
- data = parseInt(data, 10);
- if (data != 0) {
- $("#jbCredentialsCodeTip").html("<font color='red'>× 該證件號碼已經被註冊，請從新輸入</font>");
- } else {
- $("#jbCredentialsCodeTip").html("<font color='#339933'>√ 該證件號碼能夠註冊，輸入正確</font>");
- }
- }
- });
- return true;
- }
- }
- }
- // 所在地區
- function checkjbSourceArea() {
- var jbSourceArea = document.form1.jbSourceArea.value;
- if (trim(jbSourceArea) == "") {
- document.getElementById("jbSourceAreaTip").innerHTML = "<font color='red'>× 請選擇所在地區</font>";
- return false;
- } else {
- document.getElementById("jbSourceAreaTip").innerHTML = "<font color='#339933'>√ 所在地區選擇正確</font>";
- return true;
- }
- }
- // 驗證碼
- function checkNumber() {
- var checkNum = document.form1.checkNum.value;
- if (trim(checkNum) == "") {
- document.getElementById("checkNumTip").innerHTML = "<font color='red'>× 驗證碼不能爲空</font>";
- return false;
- } else {
- document.getElementById("checkNumTip").innerHTML = "<font color='#339933'>√ 驗證碼合格</font>";
- // 向後臺發送處理數據
- $.ajax({
- url : "UserAction_checkNum.action",// 目標地址
- data : {checkNum : checkNum}, // 目標參數
- type : "POST", // 用POST方式傳輸
- dataType : "text", // 數據格式:text
- success : function(data) {
- data = parseInt(data, 10);
- if (data != 0) {
- $("#checkNumTip").html("<font color='red'>× 驗證碼錯誤</font>");
- } else {
- $("#checkNumTip").html("<font color='#339933'>√ 驗證碼正確</font>");
- }
- }
- });
- return true;
- }
- }
3、
後臺調用短信驗證平臺或者第三方公司爲咱們體統的驗證方法去驗證。
相關文章
- 1. servlet--驗證碼案例
- 2. session之驗證碼案例
- 3. Session--驗證碼案例（Java）
- 4. JavaWeb——servlet案例之：驗證碼校驗
- 5. 深度學習之驗證碼案例
- 6. js案例——實現驗證碼功能
- 7. Axure RP（七）案例（發送驗證碼）
- 8. session完成驗證碼案例
- 9. Django+Jquery+Ajax+驗證碼登錄案例
- 10. jquery驗證大全
- 更多相關文章...
- • Docker 命令大全 - Docker教程
- • XML 驗證 - XML 教程
- • JDK13 GA發佈：5大特性解讀
- • Tomcat學習筆記（史上最全tomcat學習筆記）
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章