使用自定义属性验证常用的表单格式

最新推荐文章于 2024-04-18 17:25:59 发布

ArtisanLin

最新推荐文章于 2024-04-18 17:25:59 发布

阅读量877

点赞数

分类专栏： jquery 文章标签： jquery

本文链接：https://blog.csdn.net/xjlinme/article/details/66973120

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言
实际开发中，往往要注重效率和代码的复用率。以下的Demo就通过html5的自定义属性来使用Jquery实现常用的数字格式自动验证。以后的开发中需要考虑更多的、更便捷的使用技巧，这样才能做到事半功倍。

用法
在需要验证格式的Input元素中新增自定义属性 data-hook 为 number 或 id-card 就可以分别验证输入内容是否为手机号码或身份证号码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
</head>
<body>
  <input type="number" data-hook="number">
  <br>
  <input type="number" data-hook="id-card">
</body>
<script src="jquery-1.9.0.min.js"></script>
<script>
  $(function() {
    //验证手机号码
    $('[data-hook="number"]').on('focus', function() {
      $(this).val('');
      $('.number-input-notice').remove();
    });
    $('[data-hook="number"]').on('blur', function() {
      var val = $(this).val();
      if(val) {
        if(!val.match(/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/)) {
          $(this).after('<span class="number-input-notice">请填写正确的手机号码</span>');
        }
      }
    });
    //验证身份证
    $('[data-hook="id-card"]').on('focus', function() {
      $(this).val('');
      $('.id-card-input-notice').remove();
    });
    $('[data-hook="id-card"]').on('blur', function() {
      var val = $(this).val();
      if(val) {
        if(!val.match(/^([0-9]{17})[X|x|0-9]{1}$/)) {
          $(this).after('<span class="id-card-input-notice">请填写正确的身份证号码</span>');
        }
      }
    });
  });  
</script>
</html>

ArtisanLin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用自定义属性验证常用的表单格式

前言实际开发中，往往要注重效率和代码的复用率。以下的Demo就通过html5的自定义属性来使用Jquery实现常用的数字格式自动验证。以后的开发中需要考虑更多的、更便捷的使用技巧，这样才能做到事半功倍。用法在需要验证格式的Input元素中新增自定义属性 data-hook 为 number 或 id-card 就可以分别验证输入内容是否为手机号码或身份证号码。
复制链接

扫一扫

专栏目录