ASP.Net Jquery 隨機驗證碼 文本框判斷

// 登錄驗證

$(function () {

var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'a', 'B', 'b', 'C', 'c', 'D', 'd', 'E', 'e', 'F', 'f', 'G', 'g', 'H', 'h', 'I', 'i', 'J', 'j', 'K', 'k', 'L', 'l', 'M', 'm', 'N', 'n', 'O', 'o', 'P', 'p', 'Q', 'q', 'R', 'r', 'S', 's', 'T', 't', 'U', 'u', 'V', 'v', 'W', 'w', 'X', 'x', 'Y', 'y', 'Z', 'z'];

// 數組元素個數

var len = chars.length - 1;

// 產生四位隨機驗證碼

var a = chars[(Math.random() * len).toFixed()];

var b = chars[(Math.random() * len).toFixed()];

var c = chars[(Math.random() * len).toFixed()];

var d = chars[(Math.random() * len).toFixed()];

// 隨機字體顏色

$('#testing>.red').html(a).css('color', 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')')

$('#testing>.green').html(b).css('color', 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')')

$('#testing>.blue').html(c).css('color', 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')')

$('#testing>.font').html(d).css('color', 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')')

// 設置樣式

$('#testing').css({ 'font-weight': 'bolder;' });

// 更換驗證碼

$('#testing').click(function () {

randomNum()

// 清空提示信息

$('.checkTesting').html('');

})

// 驗證文本框鼠標得到焦點事件

$('#Email').focus(function () { $('#logErr').html(''); })

$('#Password').focus(function () { $('#logPwd').html(''); })

$('input[id=Authenticode]').focus(function () { $('.checkTesting').html(''); })

// 登錄驗證

$('input[type=submit').click(function () {

// 獲取用戶名

var log = $('#Email').val().trim();

// 獲取用戶密碼

var pwd = $('#Password').val().trim();

// 獲取輸入的驗證碼

var $txt = $('input[name=Authenticode]').val().trim();

// 獲取隨機生成的驗證碼

var A = $('#testing>.red').html();

var B = $('#testing>.green').html();

var C = $('#testing>.blue').html();

var D = $('#testing>.font').html();

// 拼接字符串 隨機驗證碼

var str = A + ' ' + B + ' ' + C + ' ' + D;

// 聲明變量

var strs = '';

// 循環文本框驗證碼 添加空格

for (var i = 0; i < $txt.length; i++) {

strs += $txt[i] + ' ';

}

// 判斷用戶名和密碼

if (log.length === 0 && pwd.length > 0) {

$('#logErr').html('帳號不能爲空').css('color', 'red');

randomNum()

return false;

} else if (log.length > 0 && pwd.length === 0) {

$('#logPwd').html('密碼不能爲空').css('color', 'red');

randomNum()

return false;

} else if (log.length === 0 || pwd.length === 0) {

$('#logErr').html('帳號不能爲空').css('color', 'red');

$('#logPwd').html('密碼不能爲空').css('color', 'red');

// 從新生成驗證碼

randomNum()

return false;

} else if ($txt.length === 0 || strs.trim().length === 0) {

$('.checkTesting').html('請輸入驗證碼').css('color', 'red');

// 從新生成驗證碼

randomNum()

return false;

} else if ($txt.length < 4 || $txt.length > 4) {

$('.checkTesting').html('驗證碼有誤').css('color', 'red');

// 從新生成驗證碼

randomNum()

return false;

}

// 判斷驗證碼 轉小寫

if (strs.trim().toLocaleLowerCase() === str.trim().toLocaleLowerCase()) {

// 獲取表單數據

var formData = new FormData($('form')[0]);

// ajax 提交

$.ajax({

url: '/Account/Login',

type: 'POST',

data: formData,

cache: false,

contentType: false,

processData: false

}).done(function () {

// 登錄成功

LoadPath('/Home/Index');

}).fail(function () {

// 登陸失敗

randomNum() // 隨機生成驗證碼

});

} else { // 驗證碼錯誤

randomNum() // 調用隨機驗證碼

// 提示信息

$('.checkTesting').html('驗證碼錯誤').css('color', 'red');

return false;

}

})

// 隨機生成驗證碼

function randomNum() {

// 產生四位隨機驗證碼

var a = chars[(Math.random() * len).toFixed()];

var b = chars[(Math.random() * len).toFixed()];

var c = chars[(Math.random() * len).toFixed()];

var d = chars[(Math.random() * len).toFixed()];

// 隨機字體顏色

$('#testing>.red').html(a).css('color', 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')')

$('#testing>.green').html(b).css('color', 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')')

$('#testing>.blue').html(c).css('color', 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')')

$('#testing>.font').html(d).css('color', 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')')

// 設置樣式

$('#testing').css({ 'font-weight': 'bolder;' });

// 清空文本框驗證碼

$('input[name=Authenticode]').val('');

}

})