Jquery 表单验证菜鸟教程

最新推荐文章于 2025-06-19 14:35:59 发布

wyh_Files

最新推荐文章于 2025-06-19 14:35:59 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wyh_File/article/details/78478666

本文介绍了一个使用jQuery实现的表单验证示例，包括用户、Email地址、手机号和证件号的验证逻辑。通过简单的HTML和JavaScript代码，展示了如何进行基本的前端验证，并提供了即时反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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