使用jQuery高效制作网页特效第九章习题

最新推荐文章于 2020-06-14 19:58:55 发布

wsbbdbjay

最新推荐文章于 2020-06-14 19:58:55 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wsbbdbjay/article/details/81272520

本文介绍了一个详细的表单验证实现案例，通过三个不同的HTML页面演示了如何利用正则表达式进行表单验证，包括用户名、密码、电子邮件等字段的有效性检查。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度注册页面</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 12px;
            line-height: 25px;
        }

        .register {
            float: none;
            width: 503px;
            clear: both;
            margin: 0px auto;
        }

        .register dl {
            clear: both;
        }

        .register dt {
            width: 120px;
            text-align: right;
            padding-right: 5px;
            float: left;
        }

        .inputs {
            border: 1px solid #333;
            width: 120px;
            height: 20px;;
        }

        .register dl dd div {
            color: #ff0000;
            padding-left: 5px;
            display: inline;
        }

        .btn {
            width: 60px;
            text-align: center;
            height: 26px;
            margin: 5px 5px 0 0;
        }
    </style>
</head>

<body>
<div class="register">
    <div class="center"><img src="header1.jpg"/></div>
    <form action="success.html" method="post" id="myform">
        <dl>
            <dt>用户名：</dt>
            <dd><input id="user" type="text" class="inputs"/>
                <div id="userId"></div>
            </dd>
        </dl>
        <dl>
            <dt>密码：</dt>
            <dd><input id="pwd" type="password" class="inputs"/>
                <div id="pwdId"></div>
            </dd>
        </dl>
        <dl>
            <dt>确认密码：</dt>
            <dd><input id="repwd" type="password" class="inputs"/>
                <div id="repwdId"></div>
            </dd>
        </dl>
        <dl>
            <dt>性别：</dt>
            <dd><input name="sex" type="radio" value="男"/>男 <input name="sex" type="radio" value="女"/>女
                <div id="sexId"></div>
            </dd>
        </dl>
        <dl>
            <dt>电子邮件：</dt>
            <dd><input id="email" type="text" class="inputs"/>
                <div id="emailId"></div>
            </dd>
        </dl>
        <dl>
            <dt>出生日期：</dt>
            <dd><select id="year">
                <script>
                    for (var i = 1900; i <= 2015; i++) {
                        document.write("<option value=" + i + ">" + i + "</option>");
                    }
                </script>
            </select>年
                <select id="month">
                    <script>
                        for (var i = 1; i <= 12; i++) {
                            document.write("<option value=" + i + ">" + i + "</option>");
                        }
                    </script>
                </select>月
                <select id="day">
                    <script>
                        for (var i = 1; i <= 31; i++) {
                            document.write("<option value=" + i + ">" + i + "</option>");
                        }
                    </script>
                </select>日
            </dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="sub" type="submit" value="注册" class="btn"/> <input name="cancel" type="reset" value="清除"
                                                                                class="btn"/></dd>
        </dl>
    </form>
</div>
</body>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $("#user").blur(function () {
            var user = $("#user").val();
            var userId = $("#userId");
            var regUser = /^[a-zA-Z0-9_-]{4,12}$/;
            if (user == "") {
                userId.html("用户名长度不能为空");
                return false;
            }
            else if (regUser.test(user) == false) {
                userId.html("用户名必须由字母、数字和下划线组成");
                return false;
            }
            userId.html("");
            return true;
        })


        $("#pwd").blur(function () {
            var pwd = $("#pwd").val();
            var pwdId = $("#pwdId");
            if (pwd == "") {
                pwdId.html("密码不能为空");
                return false;
            }
            else if (pwd.length < 6 || pwd.length > 12) {
                pwdId.html("密码长度为6-12字符");
                return false;
            }
            pwdId.html("");
            return true;
        })


        $("#repwd").blur(function () {
            var pwd = $("#pwd").val();
            var repwd = $("#repwd").val();
            var repwdId = $("#repwdId");
            if (repwd != pwd) {
                repwdId.html("两次输入的密码不一致");
                return false;
            }
            repwdId.html("");
            return true;
        })


        $("input[name='sex']").change(function(){
            var sex = $("#myform :checked").val();
            var sexId = $("#sexId");
            if (sex != '男' && sex != '女') {
                sexId.html("请选择性别");
                return false;
            }else if(sex == '男' || sex == '女'){
                sexId.html("");
                return true;
            }
            sexId.html("");
            return true;
        });


        $("#email").blur(function () {
            var email = $("#email").val();
            var emailId = $("#emailId");
            var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
            if (email == "") {
                emailId.html("电子邮箱不能为空");
                return false;
            }
            else if (regEmail.test(email) == false) {
                emailId.html("邮箱不正确");
                return false;
            }
            emailId.html("");
            return true;
        })


        $("#myform").submit(function () {
            var user = $("#user").val();
            var userId = $("#userId");
            var regUser = /^[a-zA-Z0-9_-]{4,12}$/;
            if (user == "") {
                userId.html("用户名长度不能为空");
                return false;
            }
            else if (regUser.test(user) == false) {
                userId.html("用户名必须由字母、数字和下划线组成");
                return false;
            }
            userId.html("");
            return true;
        })


        $("#myform").submit(function () {
            var pwd = $("#pwd").val();
            var pwdId = $("#pwdId");
            if (pwd == "") {
                pwdId.html("密码不能为空");
                return false;
            }
            else if (pwd.length < 6 || pwd.length > 12) {
                pwdId.html("密码长度为6-12字符");
                return false;
            }
            pwdId.html("");
            return true;
        })


        $("#myform").submit(function () {
            var pwd = $("#pwd").val();
            var repwd = $("#repwd").val();
            var repwdId = $("#repwdId");
            if (repwd != pwd) {
                repwdId.html("两次输入的密码不一致");
                return false;
            }
            repwdId.html("");
            return true;
        })


        $("#myform").submit(function () {
            var sex = $("#myform :checked").val();
            var sexId = $("#sexId");
            var email = $("#email").val();
            var emailId = $("#emailId");
            var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
            if (email == "") {
                emailId.html("电子邮箱不能为空");
                return false;
            }
            else if (regEmail.test(email) == false) {
                emailId.html("邮箱不正确");
                return false;
            }
            emailId.html("");
            return true;
        })



        $("#myform").submit(function () {
            var sex = $("#myform :checked").val();
            var sexId = $("#sexId");
            if (sex != '男' && sex != '女') {
                sexId.html("请选择性别");
                return false;
            }
            return true;
        })
    })
</script>
</html>


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用正则表达式验证表单内容</title>
   <style>
       *{
           margin:0;
           padding:0;
           font-size:14px;
           line-height:20px;
       }
       .main{
           width:900px;
           margin: 0 auto;
       }
       .main dl{clear: both; height: 30px;}
       .main dl dt{
           text-align:right;
           float: left;
           width:180px;
           height:25px;
           padding-right:5px;
       }
       .inputs{
           width:130px;
           height:16px;
           border:solid 1px #666666;
           float:left;
           margin-right:5px;
       }
       .main dl dd div{
           display: inline;
           margin-left:10px;
           color:#F00;
       }
   </style>
</head>

<body>
<div class="main"><img src="logo.jpg" alt="logo"/>
    <form action="success.html" id="myform" method="post">
        <dl>
            <dt>用户名：</dt>
            <dd><input id="user" type="text" class="inputs" onblur="checkUser()" /><div id="user_prompt"></div></dd>
        </dl>
        <dl>
            <dt>Email地址：</dt>
            <dd><input id="email" type="text" class="inputs" onblur="checkEmail()" /><div id="email_prompt"></div></dd>
        </dl>
        <dl>
            <dt>手机号码：</dt>
            <dd><input id="mobile" type="text" class="inputs" onblur="checkMobile()" /><div id="mobile_prompt"></div></dd>
        </dl>
        <dl>
            <dt>登录密码：</dt>
            <dd><input id="pwd" type="password"  class="inputs" onblur="checkPwd()" /><div id="pwd_prompt"></div></dd>
        </dl>
        <dl>
            <dt>密码确认：</dt>
            <dd><input id="repwd" type="password"  class="inputs" onblur="checkRepwd()" /><div id="repwd_prompt"></div></dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="" type="image" src="login.jpg" /></dd>
        </dl>
    </form>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
                $(function () {
                    $("#myform").submit(function () {
                         if(!checkUser()){
                           return false;
                         }
                        if(!checkEmail()){
                            return false;
                        }
                        if(!checkMobile()){
                            return false;
                        }
                        if(!checkPwd()){
                            return false;
                        }
                        if(!checkRepwd()){
                            return false;
                        }
                        return true;
                    })

                     })
        function checkUser() {
            var user = $("#user").val();
            var user_prompt = $("#user_prompt");
            var regUser = /^[a-zA-Z]\w{5,16}$/;
            if(user == "") {
                user_prompt.html("用户名长度不能为空");
                return false;
            }
            else if (regUser.test(user) == false) {
                user_prompt.html("用户名不正确");
                return false;
            }
            user_prompt.html("");
            return true;
        }


        function checkEmail() {
                var email = $("#email").val();
                var email_prompt = $("#email_prompt");
                var regEmail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
                if (email == "") {
                    email_prompt.html("电子邮箱不能为空");
                    return false;
                }
                else if (regEmail.test(email) == false) {
                    email_prompt.html("邮箱格式不正确，例如web@sohu.com");
                    return false;
                }
            email_prompt.html("");
                return true;
        }




        function checkMobile() {
            var mobile = $("#mobile").val();
            var mobile_prompt = $("#mobile_prompt");
            var regMobile = /^1[34578][0-9]{9}$/;
            if(mobile == "") {
                mobile_prompt.html("用户名长度不能为空");
                return false;
            }
            else if (regMobile.test(mobile) == false) {
                mobile_prompt.html("用户名不正确");
                return false;
            }
            mobile_prompt.html("");
            return true;
        }


        function checkPwd() {
            var pwd = $("#pwd").val();
            var pwd_prompt = $("#pwd_prompt");
            var regPwd=/^.*(?=.{4,10})(?=.*\d)(?=.*[A-Za-z]).*$/;
            if (pwd == "") {
                pwd_prompt.html("密码不能为空");
                return false;
            }else if(regPwd.test(pwd)==false){
                $("#pwd_prompt").html("密码包含字母和数字")
                return false;
            }
            else if (pwd.length < 4 || pwd.length > 10) {
                pwd_prompt.html("密码长度为4-10字符");
                return false;
            }
            pwd_prompt.html("");
            return true;
        }
     
        
        
        
        function checkRepwd() {
            var pwd = $("#pwd").val();
            var repwd = $("#repwd").val();
            var repwd_prompt = $("#repwd_prompt");
            if (repwd != pwd) {
                repwd_prompt.html("两次输入的密码不一致");
                return false;
            }
            repwd_prompt.html("");
            return true;
        }

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作注册验证</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:12px;
            line-height:25px;
        }
        .main{
            width:470px;
            margin: 0 auto;
        }

        .main dl{clear: both; height: 30px;}
        .main dl dt{
            text-align:right;
            float: left;
            width:100px;
            height:25px;
            padding-right:5px;
        }
        .inputs{
            width:100px;
            height:16px;
            border:solid 1px #666666;
            float:left;
            margin-right:5px;
        }
        .main dl dd div{
            display: inline;
            margin-left:10px;
            color:#F00;
        }
    </style>
</head>

<body>
<div class="main"><img src="top2.jpg"  alt="top"/>
    <form action="" method="post" id="myform">
        <dl>
            <dt class="left">用户名：</dt>
            <dd><input id="user" type="text" class="inputs" onblur="checkUser()" onfocus="showUser()" /><div id="user_prompt" class="prompt"></div></dd>
        </dl>
        <dl>
            <dt class="left">密码：</dt>
            <dd><input id="pwd" type="password"  class="inputs" onblur="checkPwd()" onfocus="showPwd()" /><div id="pwd_prompt" class="prompt"></div></dd>
        </dl>
        <dl>
            <dt class="left">&nbsp;</dt>
            <dd><input name="" type="image" src="sumbit_btn2.jpg" /></dd>
        </dl>
    </form>
</div>
<script type="text/javascript"src="jquery-1.12.4.js"></script>
<script>
    $(function () {
        $("#myform").submit(function () {
            if (!checkUser()) {
               return false;
            }
            if (!checkPwd()) {
             return false;
            }
            return true;
        })
    })
    function showUser(){
        $("#user_prompt").html("首位为字母的4-16个字母,数字,下划线")
    }
    function showPwd(){
        $("#pwd_prompt").html("4-10个字母和下划线")
    }
    function checkUser() {
        var regUser = /^[a-zA-Z]\w{4,16}$/;
        var user = $("#user").val();
        if (regUser.test(user) == false) {
            $("#user_prompt").html("用户名不正确")
            return false;
        }

            $("#user_prompt").html("")
              return true;
    }
    function checkPwd(){
        var regPwd=/^[a-zA-Z_]{4,10}$/;
        var pwd = $("#pwd").val();
        if (regPwd.test(pwd)==false) {
            $("#pwd_prompt").html("密码不正确")
            return false;
        }

            $("#pwd_prompt").html("")
        return true;
    }
</script>
</body>
</html>