jquery 注册表单验证

最新推荐文章于 2023-05-23 11:08:57 发布

Anni的咖啡

最新推荐文章于 2023-05-23 11:08:57 发布

阅读量420

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/zhou__9468/article/details/78244549

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.完成

要求

1. 完成页面布局（页面布局合理、样式和图片一致、代码无误各5分、共15分）

2. 用jquery验证Email地址是否有效，要求Email地址中必须包含@符号（5分），如果Email地址有效则显示”正确”的图标（5分），并在图标后面提示用户可用（5分），否则在Email注册框后面显示”错误”的图标（5分），图标后面提示用户Email错误。（5分）

3. 在设置昵称框中要求用户输入的昵称必须大于四个字符（其他验证不做要求）（5分），当用户输入正确的昵称时在其输入框后面提示用户输入正确，否则提示用户输入信息错误。（代码无误，效果符合要求各5分）

4. 在设置密码一栏中要求用户输入密码长度不能低于6位（其他不做要求）（5分），用户输入符合要求则提示用户密码可用，否则提示用户密码不可用。（代码无误，效果符合要求各5分）

5. 在再次输入用户密码框中要求用户密码要和第一次输入的密码相同，两次密码输入一样提示用户密码输入正确，否则提示用户两次密码不一致。（代码无误、效果符合要求各5分）

6. 当用户点击注册按钮时如果以上表单信息都符合要求，弹出提示框，告诉用户表单符合要求，否则提示用户表单有误。（代码正确、思路清晰、效果符合要求各5分）

二.代码展示

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <style>
        .th{
            background-color: #24ceff;
        }
        input{
            background-color: aquamarine;
        }
        img{
            width: 20px;
            height: 20px;
        }
    </style>
    <script type="text/javascript">
        $("document").ready(function(){
            var f;
            var f2;
            var f3;
            var f4;
            $("#em").blur(function(){
                var email=$("#em").val();
                var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/;
                $("img:eq(0)").show();
                if (!email1.test(email)) {
                    $("img:eq(0)").attr("src","no.png");
                    $("span:eq(0)").text("用户名不可用");
                    f=false;
                } else {
                    $("img:eq(0)").attr("src","yes.png");
                    $("span:eq(0)").text("用户名可用");
                    f=true;
                }
            });
            $("#name").blur(function(){
                var name = $("#name").val();
                var name1 = /^[a-z]{4,20}/i;
                if (!name1.test(name)) {
                    $("span:eq(1)").text("用户输入信息错误");
                    f2 = false;
                } else {
                    $("span:eq(1)").text("用户输入信息正确");
                    f2 = true;
                }
            });
            $("#pw").blur(function(){
                var password = $("#pw").val();
                var password1=/^[0-9]{6,20}/;
                if (password1.test(password)) {
                    $("span:eq(2)").text("用户密码可用");
                    f3 = true;
                } else {
                    $("span:eq(2)").text("用户密码不可用");
                    f3 = false;
                }
            });
            $("#pwd2").blur(function(){
                var password = $("#pw").val();
                var password2 = $("#pwd2").val();
                if (password==password2) {
                    $("span:eq(3)").text("用户密码可用");
                    f4 = true;
                } else {
                    $("span:eq(3)").text("用户密码不可用");
                    f4 = false;
                }
            });
            $("#zhu").click(function(){
                if(f&&f2&&f3&&f4){
                    alert("表单符合要求");
                }else{
                    alert("表单有误");
                }
            });
        });

    </script>
</head>
<body>
<form action="" method="post" id="form1" name="form1">
<table border="1px" cellspacing="0" cellpadding="5px">
    <tr>
        <td class="th">请填写您的Email地址:</td>
        <td style="border-right: none"><input type="text" name="email" id="em"/></td>

         <td style="border-left: none">
             <img/><span></span>

        </td>
    </tr>
    <tr>
        <td class="th">请设置您在当当网的昵称:</td>
        <td style="border-right: none"><input type="text" name="name1" id="name"/></td>

        <td style="border-left: none">
            <span></span>

        </td>
    </tr>
    <tr>
        <td class="th">设置密码:</td>
        <td style="border-right: none"> <input type="password" name="pw" id="pw"/></td>

        <td style="border-left: none">
            <span></span>

        </td>
    </tr>
    <tr>
        <td class="th">再次输入您设置的密码:</td>
        <td style="border-right: none"><input type="password" name="pwd2" id="pwd2"></td>

        <td style="border-left: none">
            <span></span>
        </td>
    </tr>
    <tr style="text-align: center">
        <td colspan="3"><input type="button" value="注册" id="zhu"></td>
    </tr>
</table>
</form>
</body>
</html>

Anni的咖啡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery 注册表单验证

一.完成要求1. 完成页面布局（页面布局合理、样式和图片一致、代码无误各5分、共15分）2. 用jquery验证Email地址是否有效，要求Email地址中必须包含@符号（5分），如果Email地址有效则显示”正确”的图标（5分），并在图标后面提示用户可用（5分），否则在Email注册框后面显示”错误”的图标（5分），图标后面提示用户Email错误。（5分）3. 在设置昵
复制链接

扫一扫