jQuery实现表单的验证

来源：互联网发布：python高级教程pdf 编辑：程序博客网时间：2024/05/14 05:26

要求：技术要求（html+css+jquery）

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

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

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

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

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

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

源码：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">    <title>jQuery表单验证</title>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <script type="text/javascript">        $(document).ready(function(){            $("img").hide();            var f1;            var f2;            var f3;            var f4;            $("input:eq(0)").blur(function(){                $("img:eq(0)").show();                var email = $("input:eq(0)").val();                var flag = email.indexOf("@")>-1;                if(flag){                    $("img:eq(0)").attr("src","图片3.png");                    $("span:eq(0)").text("用户名可用");                    f1 = true;                }else{                    $("img:eq(0)").attr("src","图片2.png");                    $("span:eq(0)").text("用户名不可用");                    f1 = false;                }            });            $("input:eq(1)").blur(function(){                $("img:eq(1)").show();                var name = $("input:eq(1)").val();                if(name.length>=4&&name.length<=20){                    $("img:eq(1)").attr("src","图片3.png");                    $("span:eq(1)").text("昵称可用");                    f2 = true;                }else{                    $("img:eq(1)").attr("src","图片2.png");                    $("span:eq(1)").text("昵称不可用");                    f2 = false;                }            });            $("input:eq(2)").blur(function(){                $("img:eq(2)").show();                var psw = $("input:eq(2)").val();                if(psw.length>=6&&psw.length<=20){                    $("img:eq(2)").attr("src","图片3.png");                    $("span:eq(2)").text("密码可用");                    f3 = true;                }else{                    $("img:eq(2)").attr("src","图片2.png");                    $("span:eq(2)").text("密码不可用");                    f3 = false;                }            });            $("input:eq(3)").blur(function(){                $("img:eq(3)").show();                var psw1 = $("input:eq(2)").val();                var psw2 = $("input:eq(3)").val();                if(psw1==psw2){                    $("img:eq(3)").attr("src","图片3.png");                    $("span:eq(3)").text("密码一致");                    f4 = true;                }else{                    $("img:eq(3)").attr("src","图片2.png");                    $("span:eq(3)").text("两次密码不一致");                    f4 = false;                }            });            $("input:eq(4)").click(function(){                if(f1&&f2&&f3&&f4){                    alert("表单符合要求");                }else{                    alert("表单有误");                }            });        });    </script>    <style type="text/css">        .t1{            background: #b3d4fc;            text-align: right;        }        .t2{            border-right: none;        }        .t3{            border-left: none;        }        input{            background: lightgreen;        }        img{            width: 20px;            height: 20px;        }    </style></head><body>    <table border="1px" cellpadding="5px" cellspacing="0" style="margin: 20px auto">        <tr>            <td class="t1">请填写您的Email地址：</td>            <td class="t2">                <input type="text">            </td>            <td class="t3">                <p>请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。</p>                <div>                    <img><span></span>                </div>            </td>        </tr>        <tr>            <td class="t1">设置您在当当网的昵称：</td>            <td class="t2">                <input type="text">            </td>            <td class="t3">                <p class="name">您的昵称可以由小写英文字母、中文、数字组成，<br>长度4-20个字符，一个汉字为两个字符</p>                <div>                    <img><span></span>                </div>            </td>        </tr>        <tr>            <td class="t1">设置密码：</td>            <td class="t2">                <input type="password">            </td>            <td class="t3">                <p>您的密码可以由大小写英文字母、数字组成，长度6-20位</p>                <div>                    <img><span></span>                </div>            </td>        </tr>        <tr>            <td class="t1">再次输入您设置的密码：</td>            <td class="t2">                <input type="password">            </td>            <td class="t3">                <div>                    <img><span></span>                </div>            </td>        </tr>        <tr>            <td colspan="3" class="t2" style="text-align: center">                <input type="button" value="注册" style="background: lightgray">            </td>        </tr>    </table></body></html>

阅读全文

0 0