当前位置:千赢国际官网 > 千赢网页手机版登入 > plus分页插件用法实例,JavaScript实现身份证验证代

plus分页插件用法实例,JavaScript实现身份证验证代

文章作者:千赢网页手机版登入 上传时间:2019-07-12

本文实例讲述了jQuery simplePage AJAX plus分页插件。分享给大家供大家参考,具体如下:

18位身份证号码各位的含义

实现原理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>simplePage</title>
<style type="text/css">
html,body{ margin:0 auto; text-align:center; }
.main{ font:12px/24px "Microsoft YaHei"; height:1000px; }
#page{ margin:100px auto; width:960px; text-align:center; }
#page a{ text-decoration:none; display:inline-block; height:24px; padding:0 8px; border-radius:3px; background-color:#DEF39E; color:#8CAC2C; text-align:center; margin:0 2px; }
#page a:hover,#page .now{ background-color:#8CAC2C; color:#fff; transition:all .5s ease 0s; }
</style>
</head>
<body>
<div class="main">
  <div id="page">
    <!-- 
    <a href="#3">上一页</a>
    <a href="#4">4</a>
    <a href="#5">5</a>
    <a href="#6" class="now">6</a>
    <a href="#7">7</a>
    <a href="#8">8</a>
    <a href="#9">下一页</a>
     -->
  </div>
  <div class="back"></div>
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
  $.simplePage({
    obj : "#page",
    nowNum : 1,
    allNum : 20,
    callBack : function(now, all){
      $(".back").html(now   "-"   all);
    }
  });
});
/*!
 * jQuery simple page plus v1.0
 * http://t.qq.com/websole 
 * Author:sole
 * Mail:macore@163.com
 * Created:2012/10/31
 * Copyright 2012 - http://t.qq.com/websole 
*/
$.extend({
  //obj:分页对象; noeNum:当前页; allNum:总页数; callBack:回调函数
  simplePage : function(opt){
    if(!opt.obj){ return false; };
    var obj = $(opt.obj); 
    var nowNum = opt.nowNum || 1; 
    var allNum = opt.allNum || 5; 
    var callBack = opt.callBack || function(){};
    var apd_ele = "";
    function ele(num, cls){
      var str = "";
      if(cls){
        str = "<a href='#" num "' class='" cls "'>" num "</a>";
      }else{
        str = "<a href='#" num "'>" num "</a>";
      }
      return str;
    }
    if(nowNum > 1){
      apd_ele = "<a href='#"  ( nowNum - 1 )  "'>上一页</a>";
      obj.append(apd_ele);
    }
    if(allNum <= 5){
      for(var i=1; i<=allNum; i  ){
        if(nowNum == i){
          apd_ele = ele(i, "now");
        }else{
          apd_ele = ele(i);
        }
        obj.append(apd_ele);
      }
    }else{
      for(var i=1; i<=5; i  ){
        if(nowNum == 1 || nowNum == 2){
          if(nowNum == i){
            apd_ele = ele(i, "now");
          }else{
            apd_ele = ele(i);
          }
        }else if( (allNum - nowNum) == 0 || (allNum - nowNum) == 1 ){
          if( (allNum - nowNum) == 0 && i == 5){
            apd_ele = ele( (allNum - 5   i), "now");
          }else if( (allNum - nowNum) == 1 && i == 4){
            apd_ele = ele( (allNum - 5   i), "now");
          }else{
            apd_ele = ele( allNum - 5   i );
          }
        }else{
          if(i == 3){
            apd_ele = ele(nowNum-3 i, "now");
          }else{
            apd_ele = ele(nowNum-3 i);
          }
        }
        obj.append(apd_ele);
      }
    }
    if((allNum - nowNum) >= 1){
      apd_ele = "<a href='#"  ( nowNum   1 )  "'>下一页</a>";
      obj.append(apd_ele);
    }
    callBack(nowNum, allNum);
    obj.find("a").click(function(){
      var nowNum = parseInt($(this).attr("href").substring(1));
      obj.html("");
      $.simplePage({
        obj : "#page",
        nowNum : nowNum,
        allNum : allNum,
        callBack :callBack
      });
      return false;
    });
  }
});
</script>
</body>
</html>

1-2位省、自治区、直辖市代码;
3-4位地级市、盟、自治州代码;
5-6位县、县级市、区代码;
7-14位出生年月日,比如19670401代表1967年4月1日;
15-17位为顺序号,其中17位男为单数,女为双数;
18位为校验码,0-9和X,由公式随机产生;

栅格系统是Bootstrap中的核心,正是因为栅格系统的存在,Bootstrap才能有着如此强大的响应式布局方案。下面是官方文档中的解说:

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》及《jquery常用操作技巧汇总》

举例:

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局。

希望本文所述对大家jQuery程序设计有所帮助。

340523 1980 0101 0013这个身份证号的含义:
34为安徽省
05为马鞍山市
23为和县
19800101为出生日期(1980年1月1日)
001为顺序号(1为单数,代表为男性)
3为验证码

我们来理解一下这一段话,可以发现其中最重要的部分就是 移动设备优先 ,那么什么是移动设备优先呢?

您可能感兴趣的文章:

  • jQuery实现伪分页的方法分享
  • jQuery ajax分页插件实例代码
  • jquery ajax分页插件的简单实现
  • 基于jquery实现表格无刷新分页
  • 使用JQuery实现的分页插件分享
  • jQuery Ajax实现无刷新分页
  • jQuery实现的仿百度分页足迹效果代码
  • jquery实现的伪分页效果代码
  • 自己动手写的jquery分页控件(非常简单实用)
  • jQuery无刷新分页完整实例代码
  • 基于jQuery实现的无刷新表格分页实例

行政区划代码

Bootstrap的基础CSS代码 默认从小屏幕设备 (比如移动设备、平板电脑)开始,然后使用 媒体查询扩展到大屏幕设备 (比如笔记本电脑、台式电脑)上的组件和网格。

最新县及县以上行政区划代码(截止2014年10月31日)

有着如下策略:

北京市 (110000 BJ)
天津市 (120000 TJ)
河北省 (130000 HE)
山西省 (140000 SX)
内蒙古自治区 (150000 NM)
辽宁省 (210000 LN)
吉林省 (220000 JL)
黑龙江省 (230000 HL)
上海市 (310000 SH)
江苏省 (320000 JS)
浙江省 (330000 ZJ)
安徽省 (340000 AH)
福建省 (350000 FJ)
江西省 (360000 JX)
山东省 (370000 SD)
河南省 (410000 HA)
湖北省 (420000 HB)
湖南省 (430000 HN)
广东省 (440000 GD)
广西壮族自治区 (450000 GX)
海南省 (460000 HI)
重庆市 (500000 CQ)
四川省 (510000 SC)
贵州省 (520000 GZ)
云南省 (530000 YN)
西藏自治区 (540000 XZ)
陕西省 (610000 SN)
甘肃省 (620000 GS)
青海省 (630000 QH)
宁夏回族自治区 (640000 NX)
新疆维吾尔自治区 (650000 XJ)
台湾省 (710000 Tw)
香港特别行政区 (810000 HK)
澳门特别行政区 (820000 Mo)

内容:决定什么是最重要的。
布局:优先设计更小的宽度。
渐进增强:随着屏幕大小增加而添加元素。

身份证第18位(校验码)的计算方法
将身份证号码前面的17位数分别乘以不同的系数;
从第一位到第十七位的系数分别为:7-9-10-5-8-4-2-1-6-3-7-9-10-5-8-4-2
将这17位数字和系数相乘的结果相加;
用加出来和除以11,看余数是多少;
余数只可能有0-1-2-3-4-5-6-7-8-9-10这11个数字;
其分别对应的最后一位身份证的号码为1-0-X-9-8-7-6-5-4-3-2
通过上面得知如果余数是2,就会在身份证的第18位数字上出现罗马数字的Ⅹ。如果余数是10,身份证的最后一位号码就是2。
举例:
某男性的身份证号码是340523198001010013。我们要看看这个身份证是不是合法的身份证。

工作原理

首先我们得出前17位的乘积和:
(3*7 4*9 0*10 5*5 2*8 3*4 1*2 9*1 8*6 0*3 0*7 1*9 0*10 1*5 0*8 0*4 1*2) = 185
然后再求余:
185 % 11 = 9
最后通过对应规则就可以知道余数9对应的数字是3。所以,可以判定这是一个合格的身份证号码。

数据行( .row )必须包含在容器 .container (固定宽度)或 .container-fluid (100%宽度)中,以便为其赋予合适的排列(aligment)和内填充(padding)。如:

JavaScript校验18位身份证

<div class="container"><!-- 水平居中,两边有margin,最小屏幕时,充满父元素 -->
<div class="row"></div>
</div>
<!-- 或者 -->
<div class="container-fluid"><!-- 默认一直充满整个父元素 -->
<div class="row"></div>
</div>

复制代码 代码如下:

在数据行( .row )中可以添加列(column),但列数之和不能超过平分的总列数(在超过时,多余部分会换行显示),默认12。(使用Less或者Sass可以进行自定义设置)如:

var city = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
var ID = '340523198001010013';

<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-6"></div>
<div class="col-md-4"></div>

首先校验位数是否是18位:

页面上的 具体内容 应当放置于列(column)内,并且 只有列 (column)可以作为数据行 .row 容器的 直接子元素 。

if(!/^d{17}(d|x)$/i.test(ID)) return false;
// d  匹配数字
// ^  匹配开始
// $  匹配结尾
// i  不区分大小写
// {17} 匹配17次
// d|x 匹配数字或x

预定义的网格类,比如 .row 和 .col-xs-4 ,可用于快速创建网格布局。

然后校验开头两位是否是合法的省(直辖市/自治区):

栅格系统中的列是通过指定 1到12 的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。

if(city[ID.substr(0,2)] === undefined) return "非法地区";

注意事项:

// stringObject.substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符
// 访问对象属性时除了可以用点(.)语法外,也可以用中括号([]),用中括号时更灵活

正如上面在注释部分所展现的一样的 .container (固定宽度)是固定宽度的布局方式。通过查看源码,在查看 .container 类的时候我们会发现,它的宽度是响应式的:(如下)

然后再校验出生日期是否合法:

.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
/*........*/
var birthday = ID.substr(6, 4)   '/'   Number(ID.substr(10, 2))   '/'   Number(ID.substr(12, 2));
var d = new Date(birthday);
var newBirthday = d.getFullYear()   '/'   Number(d.getMonth()   1)   '/'   Number(d.getDate());
var currentTime = new Date().getTime();
var time = d.getTime();
if(time >= currentTime || birthday !== newBirthday) return '非法生日';
// 获取身份证的年月日,然后再 new 一个 Date,再对比这两个日期是否一致
// 这里用Number()主要是因为身份证的日期是带0的,而new Date()出来的日期是不带0的,Number()之后就都不带0了

从上面的css代码可以看到,该类默认为整个父元素的宽度(最小屏幕),但是在大屏幕下有着不同的宽度,并且在不同宽度下左右margin会同时增加或减少(水平居中)。

最后判断校验码是否正确:

.container-fluid 类就和 .container 的默认情况一样,为100%宽度。 (CSS代码一样)

var arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
var arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
var sum = 0, i, residue;
for(i=0; i<17; i  ) {
 sum  = ID.substr(i, 1) * arrInt[i];
}
residue = arrCh[sum % 11];
if (residue !== ID.substr(17, 1)) '非法证号';

除此之外

如果以上校验都通过了,则是一个合法的身份证号;

从源码中我们还可以发现,除了有左右margin外,还可以看到该类是有着左右填充(padding)存在的。

完整代码

如果我们继续查看源码,可以发现数据行 .row 中的每一个列也有着左右填充(padding)的存在,如下:

<script>
 function checkID(ID) {
  if(typeof ID !== 'string') return '非法字符串';
  var city = {11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江 ",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北 ",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏 ",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};
  var birthday = ID.substr(6, 4)   '/'   Number(ID.substr(10, 2))   '/'   Number(ID.substr(12, 2));
  var d = new Date(birthday);
  var newBirthday = d.getFullYear()   '/'   Number(d.getMonth()   1)   '/'   Number(d.getDate());
  var currentTime = new Date().getTime();
  var time = d.getTime();
  var arrInt = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
  var arrCh = ['1', '0', 'X', '9', '8', '7', '6', '5', '4', '3', '2'];
  var sum = 0, i, residue;

  if(!/^d{17}(d|x)$/i.test(ID)) return '非法身份证';
  if(city[ID.substr(0,2)] === undefined) return "非法地区";
  if(time >= currentTime || birthday !== newBirthday) return '非法生日';
  for(i=0; i<17; i  ) {
   sum  = ID.substr(i, 1) * arrInt[i];
  }
  residue = arrCh[sum % 11];
  if (residue !== ID.substr(17, 1)) return '非法身份证哦';

  return city[ID.substr(0,2)] "," birthday "," (ID.substr(16,1)%2?" 男":"女")
 }
</script>
.col-md-1, .col-lg-12 /*......*/{
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

本文由千赢国际官网发布于千赢网页手机版登入,转载请注明出处:plus分页插件用法实例,JavaScript实现身份证验证代

关键词: 千赢国际官网 千亿国际qy8.vip