表单验证

来源：互联网发布：税收数据质量管理编辑：程序博客网时间：2024/06/11 00:09
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script type="text/javascript" src="jquery.1.12.4.js"></script>    <style type="text/css">        *{            margin:0 auto;        }        #box{            width: 1024px;            height: 500px;        }        #table{            width: 900px;            height: 300px;        }        .ge{            text-align: right;            width:200px;            background-color: aqua;        }        .k{            background-color: aquamarine;        }    </style>    <script>        $(function(){            var flag=false;            var flag2=false;            var flag3=false;            var flag4=false;            $("#email").blur(function(){                var email=$("#email").val();                var ee=email.match("@");                if(email==null){                    $("#span1").text("不能为空")                    $("#span1").css({"color":"red"});//赋颜色                }else {                    if (ee == null) {                        $("#span1").text("输入的邮箱名不合法")                        $("#span1").css({"color": "red"});//赋颜色                    } else {                        $("#span1").text("输入的邮箱名合法")                        $("#span1").css({"color": "green"});//赋颜色                        flag = true;                    }                }            });            $("#name").blur(function(){                var name=$("#name").val();                if(name.length<4){                    $("#span2").text("请输入昵称")                    $("#span2").css({"color":"red"});//赋颜色                }else {                        $("#span2").text("输入的昵称合法")                        $("#span2").css({"color": "green"});//赋颜色                        flag2 = true;                }            });            $("#pass").blur(function(){                var pass=$("#pass").val();                if(pass==""){                    $("#span3").text("请输入密码")                    $("#span3").css({"color":"red"});//赋颜色                    flag3=false;                }else if(pass.length<6||pass.length>10){                    $("#span3").text("请输入6-10密码")                    $("#span3").css({"color": "red"});//赋颜色                    flag3 = false;                }else{                    $("#span3").text("输入的密码合法")                    $("#span3").css({"color": "green"});//赋颜色                    flag3 = true;                }            });            $("#repass").blur(function(){                var pass=$("#pass").val();                var repass=$("#repass").val();                if(pass!=repass){                    $("#span4").text("两次密码不一致");                    $("#span4").css({"color":"red"});                    flag4=false;                }else{                    $("#span4").text("密码相同");                    $("#span4").css({"color":"green"});                    flag4=true;                }            });            $("form").submit(function(){                if(flag&&flag2&&flag3&&flag4){                    alert("对");                    return false;                }else{                    alert("输入的信息错误");                    return false;                }            });        });    </script></head><body><div id="box">    <h4 style="color:red"> 以下均为必填项</h4>    <form ation="" id="form">    <table id="table" border="1px"  cellpadding="10" cellspacing="0">        <tr >            <td class="ge">请填写您的Email的地址:</td>            <td><input type="text" class="k" id="email" size="32"/><span id="span1">填写有效的Email地址</span></td>        </tr>        <tr >            <td class="ge">设置您在当当网的昵称:</td>            <td><input type="text" class="k" id="name" size="32"/><span id="span2">您的昵称可以由6-10的英文字母、中文、数字组成</span></td>        </tr>        <tr >            <td class="ge">设置密码:</td>            <td><input type="text" class="k" id="pass" size="32"/><span id="span3">请输入6-10位数字作为密码</span></td>        </tr>        <tr >            <td class="ge">再次输入您设置的密码:</td>            <td><input type="text" class="k" id="repass" size="32"/><span id="span4"></span></td>        </tr>    </table>        <input type="submit" value="注册" style="margin-left: 450px">    </form></div></body></html>
阅读全文
0 0