表单验证

程序员的美腻

于 2017-10-16 07:44:12 发布

阅读量172

点赞数

本文链接：https://blog.csdn.net/qq_40087961/article/details/78245858

版权

<!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>