输入框input失去焦点就判断是否符合正则

本文链接： https://blog.csdn.net/qq_44884082/article/details/102583650

哈喽我又来咯~
这次带来的是JavaScript判断输入框失去焦点判断是否满足正则表达式~

还是先看效果咯
看完效果是不是有点小心动~不要着急现在就是大家所关心的关键咯
我们还是先看HTMl 的代码段

用户名：<br/><input type="text" id="name" onblur="verName()"/><span id="nameReg"></span><br/>
密码：<br/><input type="text" id="pwd" onblur="verPwd()"/><span id="pwdReg"></span><br/>
确认密码：<br/><input type="text" id="pwd2" onblur="verPwd2()"/><span id="pwd2Reg"></span><br/>
邮箱：<br/><input type="text" id="mailbox" onblur="verMailbox()"/><span id="mailboxReg"></span><br/>
手机号：<br/><input type="text" id="phone" onblur="verPhone()"/><span id="phoneReg"></span><br/>
地址：<br/><input type="text" id="address" onblur="verAddress()"/><span id="addressReg"></span><br/>

就是很基础的input的使用
下面是js 的代码段

<script type="text/javascript">
    function verName() {
        //用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)
        var limitierName = /^[A-Z]\w{5,19}$/;
        reg("name", limitierName);
    }

    function verPwd() {
        //密码:大写开头 数字字母符号混合 8-15位
        var limitierPwd = /^[A-Z][\w\W]{7,14}$/;
        reg("pwd", limitierPwd);
    }

    function verPwd2() {
        //确认密码:大写开头 数字字母符号混合 8-15位
        var limitierPwd2 = /^[A-Z][\w\W]{7,14}$/;
        reg("pwd2", limitierPwd2);
    }

    function verMailbox() {
        //邮箱:邮箱格式
        var limitierMailbox = /^[A-z0-9]+@[a-z0-9]+.com$/;
        reg("mailbox", limitierMailbox);
    }

    function verPhone() {
        //手机号:手机号格式
        var limitierPhone = /^(13|15|17|18)\d{9}$/;
        reg("phone", limitierPhone);
    }

    function verAddress() {
        //地址: 中文开头  数字 - 字母 中文混合
        var limitierAddress = /^[\u4e00-\u9fa5][\u4e00-\u9fa5A-Za-z0-9]+$/;
        reg("address", limitierAddress);
    }

可以写到本页面的哦
到这里结束了吗不不不还有

* 输入框的校验  消息显示区域的ID 必须按照 eleId+"Reg"
 * @param eleId 输入框的ID
 * @param rule 正则表达式
 */
function reg(eleId,rule){
    //动态的添加一个消息显示标签
    var inputValue = document.getElementById(eleId).value;
    var result = rule.test(inputValue.trim());
    if(result){
        document.getElementById(eleId+"Reg").innerHTML="√";
        document.getElementById(eleId+"Reg").style.color= "green";
    }else{
        document.getElementById(eleId+"Reg").innerHTML="×";
        document.getElementById(eleId+"Reg").style.color= "red";
    }

这是才是关键哦
判断是否满足正则表达式满足的话就会在后面显示对号哦~

到这里，这次的内容就真正结束了~
有什么疑问可以在下放评论
关注我不迷路~持续为大家带来一些精美的分享哦

输入框input失去焦点就判断是否符合正则

猜你喜欢