h5和c3里面新增的内容.和一些常用的验证规则

新的语义标签

            HTML5引入了一些新的语义标签，如<header>、<footer>、<nav>、<article>、<section>、<aside>等，这些标签可以更好地描述网页的结构和内容，使得搜索引擎更容易理解页面的内容，提高 了 页面的可访问性和可用性。

视频和音频

              HTML5支持内置的视频和音频播放器，不需要使用第三方插件，如Flash。使用HTML5的视频和音频标签，可以更方便地在网页中嵌入视频和音频，提高了用户的体验。

画布

             HTML5引入了<canvas>标签，可以在网页中创建图形、动画、游戏等交互式应用程序，使得开发者可以更方便地开发丰富的互动性应用程序。

本地存储

             HTML5提供了本地存储API，可以在客户端本地存储数据，如Web Storage和IndexedDB，使得网页可以离线访问，并且可以更快地加载页面。

增强的表单控件

            HTML5中新增了一些表单控件，如日期选择器、时间选择器、颜色选择器等，使得表单更易于使用和填写，提高了用户的体验。

Web Workers

            HTML5支持Web Workers，可以在后台运行JavaScript代码，使得网页可以更快地响应用户的操作，提高了网页的性能。

Geolocation

            HTML5提供了Geolocation API，可以获取用户的地理位置信息，可以为用户提供更加个性化的服务和体验。

CSS3引入了许多新的功能和特性，其中包括：

新的选择器

          CSS3新增了一些新的选择器，如属性选择器、伪类选择器、伪元素选择器等，可以更精确地选择元素。比如，属性选择器可以根据元素的属性值来选择元素，伪类选择器可以根据元素的状态来选择元素，伪元素选择器可以选择元素的某个部分。

盒模型

           CSS3引入了新的盒模型，可以通过box-sizing属性控制元素的盒模型，包括content-box、border-box和padding-box。content-box是标准盒模型，border-box是IE盒模型，padding-box是W3C盒模型。通过控制盒模型，可以更好地控制元素的布局和样式。

边框

          CSS3新增了一些新的边框属性，如border-radius、border-image、box-shadow等，可以更加灵活地控制元素的边框样式。比如，border-radius可以实现圆角边框，border-image可以使用图片作为边框，box-shadow可以实现元素的阴影效果。

渐变

          CSS3引入了渐变属性，包括线性渐变和径向渐变，可以更加灵活地控制元素的背景样式。比如，可以实现从一个颜色到另一个颜色的平滑渐变，或者从一个颜色到透明的渐变。

转换和动画

          CSS3引入了transform和animation属性，可以通过CSS3的转换和动画特性，实现更加丰富的交互效果。比如，可以实现元素的旋转、缩放、移动等效果，或者实现元素的动画效果，如淡入淡出、旋转、弹跳等。

字体

          CSS3引入了新的字体属性，如@font-face、font-stretch、font-feature-settings等，可以更加灵活地控制网页的字体样式。比如，可以使用自定义的字体，或者控制字体的拉伸、特性等。

媒体查询

          CSS3引入了媒体查询，可以根据设备的不同，为不同的设备提供不同的样式。比如，可以为移动设备提供不同的样式，或者根据屏幕尺寸来控制布局和样式。这样可以提高网页的适应性和可用性。

 

 

1. 邮箱格式验证规则：

function validateEmail(email) {
  const reg = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
  return reg.test(email);
}

2. 手机号码验证规则：

function validatePhone(phone) {
  const reg = /^1\d{10}$/;
  return reg.test(phone);
}

3. 密码验证规则：

function validatePassword(password) {
  const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,16}$/;
  return reg.test(password);
}

4. 身份证号码验证规则：

function validateIdCard(idCard) {
  const reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
  return reg.test(idCard);
}

5. 银行卡号验证规则：

function validateBankCard(bankCard) {
  const reg = /^([1-9]{1})(\d{15}|\d{18})$/;
  let sum = 0;
  let index = 0;
  for (let i = bankCard.length - 2; i >= 0; i--) {
    let num = parseInt(bankCard.charAt(i));
    if (index % 2 === 0) {
      num *= 2;
      if (num > 9) {
        num -= 9;
      }
    }
    sum += num;
    index++;
  }
  sum += parseInt(bankCard.charAt(bankCard.length - 1));
  return sum % 10 === 0 && reg.test(bankCard);
}

6. 网址验证规则：

function validateUrl(url) {
  const reg = /^(http|https):\/\/[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)+[^\s]*$/;
  return reg.test(url);
}

7. IP地址验证规则：

function validateIp(ip) {
  const reg = /^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])){3}$/;
  return reg.test(ip);
}

8. 时间格式验证规则：

function validateTime(time) {
  const reg = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
  return reg.test(time) && !isNaN(Date.parse(time));
}

9. 数字验证规则：

function validateNumber(number, min, max) {
  const reg = /^\d+$/;
  if (!reg.test(number)) {
    return false;
  }
  if (min !== undefined && number < min) {
    return false;
  }
  if (max !== undefined && number > max) {
    return false;
  }
  return true;
}

10. 字符串验证规则：

function validateString(str, minLength, maxLength, regExp) {
  if (minLength !== undefined && str.length < minLength) {
    return false;
  }
  if (maxLength !== undefined && str.length > maxLength) {
    return false;
  }
  if (regExp !== undefined && !regExp.test(str)) {
    return false;
  }
  return true;
}