正则表达式及知识点总结

正则表达式

验证方式

1. match();-----字符串用法
   成功则返回值，错误则返回null

var str="18229096120";
str.match();

2. test();-----正则对象用法
   成功则返回true，错误则返回false

// 声明正则变量
var reg=new RegExp();
reg.test(str);

基本正则符号

^：匹配字符串的开头，在多行检索中，匹配一行的开头；
$：匹配字符串的结尾，在多行检索中，匹配一行的结尾；
{n,m}：匹配前一项至少n次，但不能超过m次；
{n, }：匹配前一项n次或更多次；
{n }：匹配前一项n次；
?：匹配前一项0次或1次 等价于{0,1}；
+：匹配前一项1次或多次 等价于{1,}；
*：匹配前一项0次或多次 等价于{0,}；
|：选择，匹配的是该符号左边的子表达式或右边的子表达式；
\w：任何ASCII字符组成的单词 等价于[a-zA-Z0-9]；
\W：任何非ASCII字符组成的单词 等价于[^a-zA-Z0-9]；
\s：任何Unicode空白符；
\S：任何非Unicode空白符；
\d：任何ASCII数字 等价于[0-9]；
\D：除了ASCII数字之外的任何字符 等价于[^0-9]；
[…]：方括号内的任意字符；
[^…]：不在方括号内的任意字符；

举例

1.验证手机号码

var tel="18229096120";
var r=/^[1][34578][0-9]{9}$/;
var g=tel.match(/^[1][34578][0-9]{9}$/);
console.log(g);

2.验证邮箱

var e="2570276205@163.com";
var g1=e.match(/^[A-Za-z0-9_]+\@(qq|sina|163)\.(com)$/);
console.log(g1);

3.验证身份证号

var s="610221199809166943";
// var g2=s.match(/^\d+(X)?$/);
var g2=s.match(/^(\d{6})(19|20)[0-9]{2}((0\d)|(10|11|12))((0\d)|(1\d)|(2\d)|(30|31))(\d{3})(x|\d)$/);
console.log(g2);

4.验证网址

var g3="www.baidu.com";
var g4=g3.match(/^www\.[A-Za-z0-9]+\.(com|cn)$/);
console.log(g4);

5.内容替换

var s1="123aa45a6";
var k=s1.replace(/a/g,""); //g：全局替换
console.log(k);

知识点

1.手机移动端自适应：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

2.弹性布局：flex
flex主要用于响应式页面设计，兼容各种宽度的设备。
写法：div{display:flex;}
行内元素flex布局：span{display:inline-flex;}
主要属性flex-direction：

• flex-direction:row;也是默认值，即主轴的方向和正常的方向一样，从左到右排列；
• flex-direction:row-reverse;和row的方向相反，从右到左排列；
• flex-direction:column;从上到下排列；
• flex-direction:column-reverse;从下到上排列。

3.box-sizing：box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
主要属性： content-box|border-box|inherit

• content-box：宽度和高度分别应用到元素的内容框；
• border-box：为元素设定的宽度和高度决定了元素的边框盒；
• inherit：规定应从父元素继承 box-sizing 属性的值。

4.表单验证：验证数据内容的合法性

• 网页传值method：
  get：
  get是从服务器上获取数据；
  get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到;
  get传送的数据量较小。
  post：
  post是向服务器传送数据；
  post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程;
  post传送的数据量较大，一般被默认为不受限制。
• action:提交的服务器路径
• onsubmit事件：会在表单中的确认按钮被点击时发生。
• indexOf：检测里面的值
• 0：false；非0:true
• onfocus 获得焦点 onblur 失去焦点