美文网首页
5-2表单验证

5-2表单验证

作者: 大庆无疆 | 来源:发表于2019-03-12 17:16 被阅读0次
// 认证QQ号(5到12位)
var regularExpressionQQ = /^\d{5,12}$/; // 正则对象
var qq = document.getElementById('txtQQ');  //获取QQ文本框对象

qq.onblur = function () {
    var span = this.nextElementSibling; //获取span元素
    var text = this.value;
    if(!(regularExpressionQQ.test(text))) {
        span.innerText = 'QQ号输入有误,请确认后再输';
        span.style.color = 'red';
    }else {
        span.innerText = '';
    }
}

/*      //验证邮箱(dsf@ds.com或sd@sd.com.cn)
// 正则式
var regularExpressionEmail = /^\w+@\w+(\.\w+)+$/;
// 获取邮箱文本框
var email = document.getElementById('txtEMail');

// 注册失去焦点事件
email.onblur = function () {
    // 获取span元素
    var span = this.nextElementSibling;
    var txt = this.value;   // 获取文本框的内容
    if (!(regularExpressionEmail.test(txt))) {
    
        span.innerText = '邮箱输入有误,请确认后再输';
        span.style.color = 'red';
    }else {
        span.innerText = '';
    }
}*/

//-----------------包装成函数---------------
function fn(element, regularExpression, txt) {
    // 注册失去焦点事件
    element.onblur = function () {
        // 获取span元素
        var span = this.nextElementSibling;
        var text = this.value;  // 获取文本框的内容
        if (!(regularExpression.test(text))) {
        
            span.innerText = txt;
            span.style.color = 'red';
        }else {
            span.innerText = '';
        }
    }
}

var email = document.getElementById('txtEMail');
fn(email, /^\w+@\w+(\.\w+)+$/, '邮箱输入有误,请确认后再输');

相关文章

网友评论

      本文标题:5-2表单验证

      本文链接:https://www.haomeiwen.com/subject/xxinpqtx.html