<!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 表单验证 菜鸟教程
发布评论