正则表达式——登录验证

**利用传参的方式提高方法的复用性
这里涉及到JavaScript的字符串拼接操作

这是图片展示的效果：
在这里插入图片描述
下面是全部代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="verify.js"></script>
    <style type="text/css">

        .input{
            font-size: 20px;
            width: 300px;
            height: 30px;
        }

    </style>
</head>

<center>
    <br /><br /><br />
    <h3>失去焦点后验证</h3>
    <br /><br />
    <div>用&nbsp;&nbsp;户&nbsp;&nbsp;名：
        <input class="input" type="text" id="userName" onblur="regName()"  />
        <span id="userNameReg"></span>
    </div>
    <br />
    <div>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
        <input class="input" type="password" id="pwd" onblur="regpwd()" />
        <span id="pwdReg"></span>
    </div>
    <br />
    <div>确认密码：
        <input class="input" type="password" id="conpwd" onblur="regconpwd()"/>
        <span id="conpwdReg"></span>
    </div>
    <br />
    <div>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：
        <input class="input" type="text" id="mailbox" onblur="regmailbox()" />
        <span id="mailboxReg"></span>
    </div>
    <br />
    <div>手&nbsp;&nbsp;机&nbsp;&nbsp;号：
        <input class="input" type="text" id="cellphone" onblur="regphone()" />
        <span id="cellphoneReg"></span>
    </div>
    <br />
    <div>身份证号：
        <input class="input" type="text" id="identity" onblur="regidentity()" />
        <span id="identityReg"></span>
    </div>
    <br />
    <div>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：
        <input class="input" type="text" id="address" onblur="regaddress()" />
        <span id="addressReg"></span>
    </div>
</center>


<script type="text/javascript">


    //改变but字体颜色
    function chengColor(color){
        document.getElementById("btn").style.color=color;
    }
    //判断用户名 大写字母开头 6-20位字符(不允许有符号但是允许有_)
    function regName(){
        var userNameRule =  /^[A-Z]{1}[A-Za-z_]{5,19}/;
        reg("userName",userNameRule);
    }
    //判断密码 大写开头 数字字母符号混合 8-15位
    function regpwd(){
        var pwdRule=/^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;
        reg("pwd",pwdRule);
    }
    //确认密码  大写开头 数字字母符号混合 8-15位
    function regconpwd(){
        var conpwdRule=/^[A-Z][A-Za-z0-9]\w{7,14}.{1,30}$/;
        reg("conpwd",conpwdRule);
    }
    //判断邮箱格式
    function regmailbox(){
        var mailboxRule =/^[A-Z0-9]+@[a-z0-9]+.com$/;
        reg("mailbox",mailboxRule);
    }
    //判断手机号格式
    function regphone(){
        var cellphoneRule =/^[1][3,4,5,6,7,8][0-9]{9}$/;
        reg("cellphone",cellphoneRule );
    }
    //判断身份证格式
    function regidentity(){
        var identityCard = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        reg("identity",identityCard);
    }

    //判断地址格式 中文开头  数字 - 字母 中文混合
    function regaddress() {
        var addressCard =/^[\u4e00-\u9fa5][A-z0-9]+$/;
        reg("address",addressCard);
    }

</script>
</body>
</html>

Demo_layui

发布了27 篇原创文章 · 获赞 45 · 访问量 2677

私信关注

正则表达式——登录验证

猜你喜欢