zoukankan      html  css  js  c++  java
  • 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('');
    }
    })
  • 相关阅读:
    centos 搭建git 服务器
    easyui Tree树形控件的异步加载
    iis7 部署 mvc4项目提示404错误
    CS0012: 类型“System.Data.Objects.DataClasses.EntityObject”在未被引用的程序集中定义
    asp.net mvc 自定义身份验证
    asp.net mvc 自定义身份验证 2
    爬取五八同城上房子信息并保存到Excel
    scrapy爬取图片并自定义图片名字
    Scrapy爬取到的中文数据乱码问题处理
    scrapy图片-爬取哈利波特壁纸
  • 原文地址:https://www.cnblogs.com/FGang/p/6713283.html
Copyright © 2011-2022 走看看