jQuery表单验证和添加表格删除修改

最新推荐文章于 2022-09-12 11:23:12 发布

zhaochuang4858529

最新推荐文章于 2022-09-12 11:23:12 发布

阅读量391

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhaochuang4858529/article/details/78976521

本文介绍了一个使用HTML和JavaScript实现的前端表单验证功能，包括用户名、密码及电子邮件的格式检查。此外，还实现了数据提交后的动态表格展示、数据修改与删除等功能，并加入了全选功能提升用户体验。

<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
       <script type="text/javascript">
          function yan(){
           var pa = /^[a-zA-Z]+[a-zA-Z0-9]+$/;
           var name=$("#name").val();
           if(!pa.test(name)){
              $("#"+"name_msg").html("用户名只能由英文字母或数字组成(不支持中文、不能以数字开头)");

        return false;
           }else{
              $("#"+"name_msg").html("输入正确");
              return true;
           }
          }
          function youxiang(){
           var reg= /^\w+@\w+(.\w+)+$/;
           var you=$("#you").val();
           if(reg.test(you)){
          $("#you_msg").html("输入正确");
                 return true;
           }else{
                 $("#you_msg").html("输入格式不正确");
              return false;
           }

          }

       $(document).ready(function(){

           $("input").blur(function(){
               if(a1()&&a2()&&a3()){

               }
           })
       })
           function a1(){
              var $name=$("#name").val();
              if($name.length!=null&&$name!=""){
//                  $("#"+"name_msg").html("<font color='red' size='2'>输入正确</font>");

                  return yan();
              }else{
                  $("#"+"name_msg").html("<font color='red' size='2'>用户名为空</font>");
                  return false;
              }
           }
           function a2(){
               var $pwd=$("#pwd").val();
               if($pwd!=null&&$pwd!=""){
                   $("#"+"pwd_msg").html("<font color='red' size='2'>输入正确</font>");
                   return true;
               }else{
                   $("#"+"pwd_msg").html("<font color='red' size='2'>密码为空</font>");
                   return false;
               }
           }
           function a3(){
               var $you=$("#you").val();
               if($you!=null&&$you!=""){
//                   $("#"+"you_msg").html("<font color='red' size='2'>输入正确</font>");
                   return youxiang();
               }else{
                   $("#"+"you_msg").html("<font color='red' size='2'>邮箱为空</font>");
                   return false;
               }
           }

           function inte(){
               if(a1()==false){

               }else if(a2()==false) {

               }else if(a3()==false){

               }else{
                   return zhao();
               }


           }
           var aa=1;
           function zhao(){


                        var $name=$("#name").val();
                      var $pwd=$("#pwd").val();
                      var $you=$("#you").val();
                      var mytable=$("#mytable");
                    var mytr="<tr><td>"+aa+"</td><td><input type='checkbox' class='aa'/></td><td>"+$name+"</td><td>"+$pwd+"</td><td>"+$you+"</td>"
                    +"<td><input type='button' value='删除' id='sc"+aa+"'/></td>"
                    +"<td><input type='button' value='修改' id='xg"+aa+"'/></td>"
                    +"</tr>";
                   $("#mytable").append(mytr);

                   $("#sc"+aa).click(function(){

                       $(this).parent().parent().remove();
                   });
                   $("#xg"+aa).click(function(){
                       upda=$(this).parent().parent();//把修改的tr保存到全局的变量中，供替换
                       var tds=upda.children();//得到tr里的所有td
                       update=tds[0].innerText;
                       $("#xname").val(tds[2].innerText);//得到名字，存放到名字的修改框中
                       $("#xpwd").val(tds[3].innerText);//得到密码
                       $("#xyou").val(tds[4].innerText);//得到邮箱
                   });
                      aa++;
                      $("#but").click(function(){
                          var xname=$("#xname").val();
                          var xpwd=$("#xpwd").val();
                          var xyou=$("#xyou").val();
                          var tds=upda.children();//得到tr里的所有td
                          tds[2].innerText=xname;//把新的名字填写到相应的td中
                          tds[3].innerText=xpwd;
                          tds[4].innerText=xyou;
                      });
                   //checkbox全选

                   $("#ch").click(function(){
                          var ss=$(".aa");
                          var flag=this.checked;
                          for (var i = 0; i < ss.length; i++) {
                              $(ss[i]).prop("checked",flag);
                          }
                      });
           }


       </script>
   </head>
   <body>
       用户名:<input type="text" id="name" /><span id="name_msg"></span><br />
       密码:<input type="text" id="pwd" /><span id="pwd_msg"></span><br />
       邮箱:<input type="text" id="you" /><span id="you_msg"></span><br />
       <input type="button" value="验证" onclick="inte()"/><br />
       <table border="1" id="mytable">
       <tr>
       <th>序号</th>
       <th><input type="checkbox" id="ch"/></th>
       <th>用户名</th>
       <th>密码</th>
       <th>邮箱</th>
       <th>操作</th>
       </tr>
       </table>
       <table>
           <tr>
               <td>用户名:<td><input type="text" id="xname"/></td>

           </tr>
           <tr><td>密码:<td><input type="text" id="xpwd"/></td>
               </td></tr>
           <tr>
               <td>
                   邮箱:<td><input type="text" id="xyou"/></td>

               </td>
           </tr>
           <tr>
               <td>
                   <input type="button" value="确认修改" id="but" />
               </td>
           </tr>
       </table>
   </body>
</html>