admin管理员组文章数量:1794759
Jquery 表单验证 菜鸟教程
<!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 表单验证 菜鸟教程 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971373a123918.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论