表单验证，正则表达式的运用。

最新推荐文章于 2022-05-05 17:03:09 发布

懒得多写

最新推荐文章于 2022-05-05 17:03:09 发布

阅读量250

点赞数

文章标签： jquery js html

本文链接：https://blog.csdn.net/weixin_45701008/article/details/104207694

版权

表单验证，正则表达式的运用以及其他相关知识点总结。

先上效果图：

表单验证
问题一：布局的时候利用的表结构，所以每一行的 td 或者 tr 属性应该添加标记属性class，（之前添加的是id，想起id的唯一性，后来改成了class）。每一行的末尾td内应该添加一个作为判断结果标记。
问题二：正则表达式的使用：
1，命名：
val02=/ ^ [a-zA-Z]{1,}[0-9]{7} $ /; 开头为字母。
val02=/ ^ 1[3|5|6|7|8|9] [\d] {8} $ /; 电话号判断。
2.方法：
正则表达式字符串 . test( 目标字符串 )。
即：regex . test( val01 ) 。
返回值boolean类型。
问题三：文本框内默认提示信息的添加，即：laceholder=“不得超过6位”。
问题四：disable的使用，例： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲submitid").prop\dots$ (".Chunk01 span").css(“display”,“none”);是否显示某元素，设置值为“none”,“block”,“inline"等，字符串，调用方式 .css（）。）
问题四：改变元素内的字体的颜色，即：$(”.Chunk01 span").eq(num).css(“color”,“red”);使得内的字体变为红色，直接调用 .css(“color”,颜色)方法；
问题五：需要注意form的属性action：地址，method：get/post上传方式。form内部的表单元素如果要上传结果数据，则该表单元素需要添加name属性。
例：
待解决问题：主要是表单提交onsubmit无效果，无论设置为true还是false最终表单都能提交，查了一上午，将网上的案例复制粘贴运行也依旧不管用，不知道什么原因，略过。
布局

 <body>
  <div class="Chunk01">
   <form  action="josn01.json" method="get" onsubmit=false>
    <table>
    <tr><th colspan="2">表单验证</th></tr>
    <tr><td class="td01">用户名：</td><td><input type="text" name="user" placeholder="不得超过6位"><span></span></td></tr>
    <tr><td class="td01">密码：</td><td><input type="password" name="pass" placeholder="请输入8位非纯数字密码"><span></span></td></tr>
    <tr><td class="td01">电话：</td><td><input type="tel" name="phonenumble" placeholder="请输入11位手机号"><span></span></td></tr>
    <tr><td colspan="2"><input type="submit" id="submitid" name="submit"></td></tr>
    </table>
   </form>
  </div>
 </body>

js实现

  <script type="text/javascript" src="jquery-3.4.1.js" ></script>
  <script>
  var val01;
  var val02;
  var val03;
  var flag=false;
   $(function(){
    //初始化按钮状态，不可提交
    $("form").onsubmit=false;
    $("#submitid").prop("disabled",true);
    //$(".Chunk01 span").css("display","none");
    //用户名验证
    $(".Chunk01 .td01:eq(0)").next().children().on("keypress",function(){
     val02=/^[\w]{2,6}$/;//
     val03=0;
     mychange(this,val02,val03);
    });
    //密码验证
    $(".Chunk01 .td01:eq(1)").next().children().on("keypress",function(){
     val02=/^[a-zA-Z]{1,}[0-9]{7}$/;//开头为字母
     val03=1;
     mychange(this,val02,val03);
    });
    //手机号输入验证    
    $(".Chunk01 .td01:eq(2)").next().children().on("keypress",function(){
     val02=/^1[3|5|6|7|8|9][\d]{8}$/;
     val03=2;
     mychange(this,val02,val03);
    });
   })
   //验证结果的效果显示。
   function mychange(obj,reg,num){
    val01=$(obj).val();   
     if(reg.test(val01)){
      $(".Chunk01 span").eq(num).html("√");
      $(".Chunk01 span").eq(num).css("color","green");
      $("#submitid").prop("disabled",false);
      flag=false;
     }else{
      $(".Chunk01 span").eq(num).html("x");
      $(".Chunk01 span").eq(num).css("color","red");
      $("#submitid").prop("disabled",true);
      flag=true;
     }
   }
   function checksubmit(){
     return flag;
    } 
  </script>

懒得多写

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证，正则表达式的运用。

表单验证，问题总结先上效果图：问题一：布局的时候利用的表结构，所以每一行的 td 或者 tr 属性应该添加标记属性class，（之前添加的是id，想起id的唯一性，后来改成了class）。每一行的末尾td内应该添加一个作为判断结果标记。问题二：正则表达式的使用：1，命名：val02=/ ^ [a-zA-Z]{1,}[0-9]{7} $ /; 开头为字母。val02=/ ^ 1[3|...
复制链接

扫一扫