正则表单验证

最新推荐文章于 2021-09-01 17:49:00 发布

「已注销」

最新推荐文章于 2021-09-01 17:49:00 发布

阅读量430

点赞数 1

本文链接：https://blog.csdn.net/awesomedy/article/details/79341642

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        label{
            display: inline-block;
            width: 70px;
            text-align: right;
            color: blue;
            font-size: 14px;
        }
        li{
            position: relative;
            list-style: none;
            line-height: 45px;
            text-align: center;
        }
        .content{
            outline: none;
            width: 250px;
            height: 30px;
            border: 1px solid silver;
            border-radius: 4px;
        }
        ul{
            border: 1px dashed silver;
            width: 370px;
            padding: 10px 10px;
            margin: 0 auto;
        }
        input[type=submit],input[type=reset]{
            width: 90px;
            height: 35px;
            line-height: 35px;
            background-color: deepskyblue;
            color: white;
            outline: none;
            border: 1px solid silver;
        }
        .error{
            display: none;
            position: absolute;
            z-index: 1;
            right: 22px;
            top: 40px;
            width: 252px;
            line-height: 30px;
            background-color: #ffe113;
            color: red;
            font-size: small;
            text-align: left;
        }
        .errordisplay{
            display: block;
        }
    </style>
</head>
<body>
<form action="" οnsubmit="return subinfo()">
    <ul>
        <li><label for="userName">姓名：</label>
            <input type="text" name="userName" class="content"/>
            <span class="error">*用户名不能为空！</span>
        </li>
        <li><label for="nickName">昵称：</label>
            <input type="text" name="nickName" class="content"/>
            <span class="error">*昵称不能为空！</span>
        </li>
        <li style="text-align: left;padding-left: 22px"><label for="userSex">性别：</label>
            <input type="radio" checked name="userSex"/>男
            <input type="radio" name="userSex"/>女
        </li>
        <li><label for="userAge">年龄：</label>
            <input type="text" name="userAge" class="content"/>
            <span class="error">*年龄在0-100之间！</span>
        </li>
        <li><label for="userId">证件号：</label>
            <input type="text" name="userId" class="content"/>
            <span class="error">*证件号格式不正确！</span>
        </li>
        <li><label for="userEmail">邮箱：</label>
            <input type="text" name="userEmail" class="content"/>
            <span class="error">*邮箱格式不正确！</span>
        </li>
        <li><label for="userTel">电话：</label>
            <input type="text" name="userTel" class="content"/>
            <span class="error">*电话格式不正确！</span>
        </li>
        <li><label for="userAdd">地址：</label>
            <input type="text" name="userAdd" class="content"/>
            <span class="error">*地址不能为空！</span>
        </li>
        <li><label for="userNum">验证码：</label>
            <input type="text" name="userNum" class="content"/>
        </li>
        <li>
            <input type="submit"/>
            <input type="reset"/>
        </li>
    </ul>
</form>
<script>
    //构造函数
    function subinfo(){
        //先获取元素
        var contxt=document.getElementsByClassName("content");
        //获取错误信息元素
        var error=document.getElementsByClassName("error");
        //判断姓名
        /*\S 直接写判断非空*/
        var namestr=/\S/;
        if(!namestr.test(contxt[0].value)){
            error[0].className="error errordisplay";
            return false;
        }
        else{
            error[0].className="error";
        }
        if(!namestr.test(contxt[1].value))
        {
            error[1].className="error errordisplay";
            return false;
        }
        else
        {
            error[1].className="error";
        }
        /*年龄*/
        var agestr=/^[0-9]{1,2}$/;
        if(!agestr.test(contxt[2].value))
        {
            error[2].className="error errordisplay";
            return false;
        }
        else{
            error[2].className="error";
        }
        //证件号
        var idstr=/^[0-9]{18}$/;
        if(!idstr.test(contxt[3].value))
        {
            error[3].className="error errordisplay";
            return false;
        }
        else{
            error[3].className="error";
        }
        //邮箱
        var stremail=/^[a-zA-Z0-9_]{3,10}\@[a-zA-Z]{2,4}\.[a-zA-Z]{2,4}$/;
        if(!stremail.test(contxt[4].value))
        {
            error[4].className="error errordisplay";
            return false;
        }
        else{
            error[4].className="error";
        }
        //电话
        var strtel=/^[1]{1}[3,5,7,8]{1}[0-9]{9}$/;
        if(!strtel.test(contxt[5].value))
        {
            error[5].className="error errordisplay";
            return false;
        }else{
            error[5].className="error";
        }
        //地址
        if(!namestr.test(contxt[6].value)){
            error[6].className="error errordisplay";
            return false;
        }
        else{
            error[6].className="error";
        }
        return true;
    }
</script>
</body>
</html>

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
正则表单验证

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; label{ display: inl
复制链接

扫一扫