JS正则表达式,表单登录验证

最新推荐文章于 2021-11-19 15:19:13 发布

今天又困了吗

最新推荐文章于 2021-11-19 15:19:13 发布

阅读量290

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45747582/article/details/102596016

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<table align="center">
    <tr>
        <td>账号:</td>
        <td><input type="text" id="name"   onblur="f()"/> <span id="nameed"></span></td>
    </tr>
    <tr>
        <td>密码:</td>
        <td><input type="text" id="pwd" onblur="f1()"/><span id="pwded"></span></td>
    </tr>
    <tr>
        <td>邮箱:</td>
        <td><input type="text" id="com"onblur="f2()"/><span id="comed"></span></td>
    </tr>
    <tr>
    <td>手机号码:</td>
    <td><input type="text" id="tel"onblur="f3()"/><span id="teled"></span></td>
</tr>
    <tr>
    <tr>
        <td>身份证号:</td>
        <td><input type="text" id="IDnumber"onblur="f4()"/><span id="IDnumbered"></span></td>
    </tr>
    <tr>
        <td colspan="2"><input type="button" id="ok" value="提交" onclick="act()"/></td>
    </tr>
</table>
<script type="text/javascript">
    function f(){
        var userName = /^[A-Z]{1}[A-Za-z]{5,19}$/;
        reg("name",userName);
    }
    function f1(){
        var userPwd = /^[a-zA-Z]\w{5,17}$/;
        reg("pwd",userPwd);
    }
    function f2(){
        var userCom = /^[A-Z0-9]+@[A-z0-9]+.com$/;
        reg("com",userCom);
    }
    function f3(){
        var userTel = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|4|5|6|7|8|9])\d{8}$/;
        reg("tel",userTel);
    }
    function f4(){
        var userIDNumber = /(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
        reg("IDnumber",userIDNumber);
    }
    function act(){
        if(document.getElementById("nameed").innerHTML=="√"&&document.getElementById("pwded").innerHTML=="√"
                &&document.getElementById("comed").innerHTML=="√"&&
                document.getElementById("teled").innerHTML=="√"&&document.getElementById("IDnumbered").innerHTML=="√"){
            alert("提交成功");
        }else{
            alert("请检查错误")
        }
    }
    function reg(eleId,rule) {
        var inputValue = document.getElementById(eleId).value;
        var result = rule.test(inputValue.trim());
        if (result&&inputValue!="") {
            document.getElementById(eleId+"ed").innerHTML="√";
            document.getElementById(eleId+"ed").style.color = "green";
        } else {
            document.getElementById(eleId+"ed").innerHTML="×";
            document.getElementById(eleId+"ed").style.color = "red";
        }
    }
</script>
</body>
</html>

在这里插入图片描述

今天又困了吗

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JS正则表达式,表单登录验证

JS正则表达式,表单登录验证<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><table align="center"> &l...
复制链接

扫一扫