记录一下学习历程正则表达式表单验证一个小案例

今天学到了正则表达式，接下来复习一下使用正则表达式做一个小小的案例练习

 

• 先插入一段HTML里面的代码：

    QQ号：<input type="text" id="txtQQ"> <span></span><br>
    邮箱：<input type="text" id="txtEMail"><span></span><br>
    手机：<input type="text" id="txtPhone"><span></span><br>
    生日：<input type="text" id="txtBirthday"><span></span><br>
    姓名：<input type="text" id="txtName"><span></span><br>

 

Css这里就不说了，想给提示文本添加颜色可以给 span 标签添加一个颜色就好了

 

• 下面奉上JS代码：

• 首先了解一下下面两个事件，我们需要用到的

  • 焦点离开：onblur；          获取焦点：onfocus；

 

<script>
// 首先找到文本框，获取文本框
var txtQQ = document.querySelector("txtQQ");
// 然后给获取的文本框注册焦点离开事件
tetQQ onblur = function(){
    //通过正则匹配用户的输入
    var reg = /^\d{5,13}$/;
    //获取文本框对应的span标签
    var span = this.nextElementSibling;
    //做出判断然后决定提示内容
    if(reg.test(this.value)){
        span.innerHTML = "";  // 匹配成功，去掉span中的提示
    } else {
        span.innerHTML = "请输入正确的QQ号码";
    }
}
</script>

这里就不做过得演示了，剩下的也都是大同小异的

因为考虑到都再代码中出现大量相同的代码会造成代码冗余，我们要对相同的代码进行封装

下面写一下对代码的封装：

// id - 文本框
// reg - 正则表达式对象
// tip - 验证失败后的提示
<script>
    checkInput('txtQQ', /^\d{5,13}$/, '请输入正确的QQ号码');
    checkInput('txtEMail', /^\w+@\w+.\w+(.\w+)?$/, '请输入正确的邮箱');
    checkInput('txtPhone', /^\d{11}$/, '请输入正确的手机号码');
    checkInput('txtBirthday', /^\d{4}-\d{1,2}-\d{1,2}$/, '请输入正确的日期');
    checkInput('txtName', /^[\u4e00-\u9fa5]{2,4}$/, '请输入正确的姓名');

    function checkInput (id, reg, tip){
    var txt = document.querySelector("#" + id);
    txt.onblur = function(){
        var span = this.nextElementSibling;
        // 验证用户的输入
        if(reg.test(this.value)){
            //验证成功，删除提示
            span.innerHTML = "";
        } else {
            //验证失败，显示提示
            span.innerHTML = tip;
        }

    }
}
</script>

今天就到这里就结束了，不定期更新每天的学习历程，有不足的地方希望大家指出，共同努力