jQuery表单验证

最新推荐文章于 2025-06-12 11:32:11 发布
原创最新推荐文章于 2025-06-12 11:32:11 发布 · 166 阅读
0 ·
CC 4.0 BY-SA版权
jQuery 专栏收录该内容
4 篇文章
订阅专栏
 <script src="jquery-3.0.0.js" type="text/javascript"></script>
    <style>
        li {
            list-style: none;
            line-height: 40px;
            margin: 15px 400px;
            position: relative;
        }

        li input[type=text] {
            outline: none;
            height: 30px;
            width: 300px;
            background-color: aquamarine;
        }

        li label {
            display: inline-block;
            width: 100px;
            text-align: right;
        }

        li input[type=reset], li input[type=submit] {
            width: 100px;
            margin: 0 4%;
        }
        #sub{
            margin:0 10px 0 110px;
        }

        .error {
            position: absolute;
            z-index: 2;
            left: 100px;
            top: 30px;
            color: red;
            font-size: small;
        }
        .success {
            position: absolute;
            z-index: 2;
            left: 100px;
            top: 30px;
            color: red;
            font-size: small;
        }
    </style>
</head>
<body>
<form id="formM" name="form" method="post" action="表单提交页面.html">
    <ul>
        <li><label for="name">姓名：</label><input name="name" class="txt" type="text"/></li>
        <li><label for="age">年龄：</label><input name="age" class="txt" type="text"/></li>
        <li><label for="pwd">密码：</label><input name="pwd" class="txt" type="text"/></li>
        <li><label for="newPwd">确认密码：</label><input name="newPwd" class="txt" type="text"/></li>
        <li><label for="ID">身份证：</label><input name="ID" class="txt" type="text"/></li>
        <li><label for="tel">电话：</label><input name="tel" class="txt" type="text"/></li>
        <li><label for="email">邮箱：</label><input name="email" class="txt" type="text"/></li>
        <li><label for="add">地址：</label><input name="add" class="txt" type="text"/></li>
        <li><input id="sub" type="submit" value="注册"/><input type="reset" value="重置"/></li>
    </ul>
</form>
<script>
   $(function() {
       $("#sub").click(function() {
           return true;
       });
       var error =[
           {
               err:["姓名不能为空"]
           },
           {
               err:["年龄不能为空","年龄必须在1岁到120岁之间"]
           },
           {
               err:["密码不能为空","密码格式不正确","密码位数在六到八位"]
           }
               ,{
               err:["密码不能为空","两次密码不一致"]
           }
               ,{
               err:["身份证不能为空","身份证格式不正确"]
           },
           {
               err:["电话不能为空","电话格式不正确"]
           },
           {
               err:["邮箱不能为空","邮箱格式不正确"]
           },
           {
               err:["地址不能为空"]
           }
       ];
       $(".txt").each(function(index){
           $(this).blur(function() {
               var par = $(this).parent();
               var dex = $(this).eq();
               console.log(dex);
               var text = $(this).val();
           })
       });
       function showError() {
           var name = $(this).attr("name");
           switch (name){
               case "name":
                       if(text.length == 0) {
                       }
                   break;
               case "age":break;
               case "pwd":break;
               case "newPwd":break;
               case "ID":break;
               case "tel":break;
               case "email":break;
               case "add":break;
           }
       }
       function addError(Index) {
           var span = "<span>"+error[index]+"</span>";
           par.append(span);
       }
   })
</script>
</body>