<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../wrap/jquery.1.12.4.js"></script>
    <title></title>
</head>
<body>
     <div>
         <table>
             <tr>
               <td>用户</td>
               <td><input type="text" id="name" placeholder="用户 3-21个字符"/></td>
               <td><span class="name"></span></td>
             </tr>
             <tr>
               <td>Email地址</td>
               <td><input type="text" id="email" placeholder="email 必须包含@"/></td>
               <td><span class="email"></span></td>
             </tr>
             <tr>
                 <td>手机号</td>
                 <td><input type="text" id="tel" placeholder="不能少于11个字符"/></td>
                 <td><span class="tel"></span></td>
             </tr>
             <tr>
                 <td>证件</td>
                 <td><input type="text" id="zheng" placeholder="不能少于18个字符"/></td>
                 <td><span class="zheng"></span></td>
             </tr>
         </table>
     </div>


     <script type="text/javascript">
         //1
         $("#name").blur(function(){
             var name = $("#name").val();
               if(name.length<3 || name.length>21 || name.length == null){
                   $(".name").text("您输入有误，请重新输入");
                   $(".name").css({"color":"red"});
               }else{
                   $(".name").text("下一步");
                   $(".name").css({"color":"#4FD92B"});
               }
         });
         //2
         $("#email").blur(function(){
             var email = $("#email").val();
             if(email.indexOf("@")== -1 || email.length == null){
                 $(".email").text("您输入有误，请重新输入");
                 $(".email").css({"color":"red"});
             }else{
                 $(".email").text("下一步");
                 $(".email").css({"color":"#4FD92B"});
             }
         });
         //3
         $("#tel").blur(function(){
             var tel = $("#tel").val();
             if(tel.length == 11 || tel.length == null){
                 $(".tel").text("下一步");
                 $(".tel").css({"color":"#4FD92B"});
             }else{
                 $(".tel").text("您输入有误，请重新输入");
                 $(".tel").css({"color":"red"});
             }
         });
         //4
         $("#zheng").blur(function(){
             var zheng = $("#zheng").val();
             if(zheng.length == 18 || zheng.length == null){
                 $(".zheng").text("下一步");
                 $(".zheng").css({"color":"#4FD92B"});
             }else{
                 $(".zheng").text("您输入有误，请重新输入");
                 $(".zheng").css({"color":"red"});
             }
         });
     </script>
</body>
</html>

更多推荐

Jquery 表单验证 菜鸟教程