正则表达式与激活按钮

javascript 正则表达式
学习链接:http://www.runoob.com/regexp/regexp-syntax.html

function CheckMail(mail) {
 var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
 if (filter.test(mail)) return true;
 else {
 alert('您的电子邮件格式不正确');
 return false;}

例如以上的检验email的函数,其中可见规定的邮箱正则表达式为

var filter =/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

我们常常因为用户的不规则输入而禁止用户提交表单,
所以我的想法是 通过检验用户输入来激活发送按钮

  1. 定义检验规则

本人用到的表达是目前有email、password、checkCode(验证码)的表达式

var
    email_reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/,
    password_reg = /^[a-zA-Z\d]\w{4,11}[a-zA-Z\d]$/,
    code_reg = /^\w{6}$/;

更多正则表达式参见:http://blog.jobbole.com/96052/

2.检验需某的元素的值

    //验证邮箱
function check_email_reg(email_id) {
    var get_email = $("#" + email_id).val();
    return email_reg.test(get_email);
}
//验证密码
function check_password_reg(password_id) {
    var get_password = $("#" + password_id).val();
    return password_reg.test(get_password);
}
//验证6个字符的验证码
function check_code6_reg(code6_id) {
    var get_code = $("#" + code6_id).val();
    return (code_reg.test(get_code) == true);
}

3.激活某发送按钮

//输入邮箱—+密码+验证码激活按钮
var active_epc_btn =function (email_id,password_id,code6_id,btn_id) {
    this.active = function() {
        document.getElementById(btn_id).disabled = true ;
        if(check_email_reg(email_id) && check_password_reg(password_id) && check_code6_reg(code6_id) ){
            document.getElementById(btn_id).disabled = false ;
            return true ;
        }
        else {
            return false ;
        }
    }
};

于是乎准备工作已经完成,可以使用了。
新建一个html 重要代码:

<input type="text" id="email_login">
<input type="text" id="password_login">
<input type="text" id="code_login">
<button type="button" id="check_login_btn">

新建一个js文件 例如login.js 包含之前三个步骤的代码

//激活登录按钮事件
$(function(){
var active_login = new active_epc_btn("email_login","password_login","code_login","check_login_btn");
    active_login.active();
    $('#email_login,#password_login,#code_login').keyup(function () {
        active_login.active();
    });
});
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值