表单验证和正则表达式

表单验证

表单：收集用户信息，并把信息发送给服务器程序进行处理

what

验证数据的格式，将符合标准数据格式要求的数据，发送给后台。

对用户的输入做格式校验，确保能够发送到后台服务器的数据一定是正确的。降低服务器的压力，提高用户体验

效果实现

得焦事件

用户输入提示
失焦事件

用户输入是否为空

表单验证的特效和页面布局息息相关

作用：①在用户输入时，给与用户各种输入的反馈提示
```
 ②真正的控制 表单是否能够进行提交
```

字符串的操作 String 对象

string对象专门用来处理字符串

charAt()------返回在指定下标位置的字符

javascript 复制代码

 <script>
        var aa='1254你好'
        var bb='4567哈哈'
		
         //输入下标获取改下标的值
        console.log(aa.charAt(4));

//结果：你
 </script>

concat()------连接两个或更多字符串，并返回新的字符串

javascript 复制代码

<script>
        var aa='1254你好'
        var bb='4567哈哈'
        var cc='789'

        //连接两个字符串，并返回一个新的字符串
        console.log(aa.concat(bb));
        console.log(aa.concat(cc));
//结果：1254你好4567哈哈
    // 1254你好789
    </script>

indexOf()------返回某个指定的子字符串值在字符串中首次出现的位置
includes()------查找字符串中是否包含指定的子字符串。是返回true，否则false
lastIndexOf()------从后向前搜索字符串，并从起始位置(0)开始计算返回字符串最后出现的位置

javascript 复制代码

 <script>
        var aa='1254你好'
        var bb='4567哈哈'
        var cc='789'
        var dd='12345654123145532'

        //查找特定字符串在整个字符串中首次出现的位置
        console.log(dd.indexOf('5'));
        //查找特定字符串在整个字符串中最后出现的位置，从后向前搜索
        console.log(dd.lastIndexOf('5'));
        //查找字符串中是否包含特殊字符串
        console.log(dd.includes('565'));
        console.log(dd.includes('你好'));
//结果： 4  14 true false
    </script>

replace()------用于在字符串中用一些字符替换另一些字符，或替换一个正则表达式匹配的字符串
slice()------提取字符串的片段，并在新的字符串中返回被提取的部分
split()------把字符串分割为字符串数组

javascript 复制代码

<script>
        var aa='1254你好'
        var bb='4567哈哈'
        var cc='789'
        var dd='12345654123145532'

        //将特殊字符串替换到字符串中
        console.log(bb.replace('哈哈','你好'));
        console.log(bb);
        var ee=bb.replace('哈哈','你好')
        console.log(ee);

        //提取字符串，并返回被提取后的新的字符串
        console.log(dd.slice(4,11));
        console.log(dd);
        //var ff=dd.split('5654123');
        var ff=dd.slice(4,11);
        console.log(ff);

        //将字符串转换成数组
        console.log(bb.split(''));
        console.log(bb);
        var gg=bb.split('67');
        console.log(gg);
//结果:4567你好
     //4567哈哈
// 4567你好
// 5654123
// 12345654123145532
// 5654123
// ['4','5','6','7','哈','哈']
// 4567哈哈
// (2) ['45', '哈哈']

    </script>

startsWith()------查看字符串是否以指定的字符串开头
endsWith()------查看字符串是否以指定的字符串结尾

javascript 复制代码

<script>
        var aa='1254你好'
        var bb='4567哈哈'
        var cc='789'
        var dd='12345654123145532'

        //字符串是否以特定字符串开头
        console.log(bb.startsWith('45'));
        console.log(bb.startsWith('5'));
        //字符串是否以特定字符串结尾
        console.log(bb.endsWith('哈哈'));
        console.log(bb.endsWith('5'));

//结果：true false true false
    </script>

substr(起始索引，提取的长度)------从起始索引号提取字符串中指定数目的字符
substring()------提取字符串中两个指定的索引号直接的字符前闭后开

javascript 复制代码

<script>
        var aa='1254你好'
        var bb='4567哈哈'
        var cc='789'
        var dd='12345654123145532'

       //起始位置，提取长度 提取字符串
        console.log(dd.substr(2,5));
        //起始位置，结束位置 提取字符串

//结果：34565  345
    </script>

        console.log(dd.substring(2,5));

toLowerCase()------把字符串转换成小写
toUpperCase()------把字符串转换成大写

javascript 复制代码

<script>
        var aa='1254你好'
        var bb='4567哈哈'
        var cc='789'
        var dd='12345654123145532'
        var hh='BCNSMDLKGAL'
        var ii='zcffaet'

        //把字符串转换成小写
        console.log(hh.toLowerCase());
        //把字符串转换成大写
        console.log(ii.toUpperCase());
//结果：bcnsmdlkgal
    // ZCFFAET
    </script>

trim()------去除字符串两边的空格
toString()------返回一个字符串

javascript 复制代码

 <script>
        var aa='1254你好'
        var bb='4567哈哈'
        var cc='789'
        var dd='12345654123145532'
        var hh='BCNSMDLKGAL'
        var ii='zcffaet'
        var jj=' jssfj  '
        var kk=parseInt(12346);

        //去除字符串两边的空格
        console.log(jj.trim());
        console.log(jj);
        //转换成字符串
        console.log(kk.toString());
        console.log(kk);
    </script>

正则表达式

正则表达式，又称规则表达式，通常被用来检索、替换那些符合某个模式(规则)的文本

why

有一些比较复杂的校验使用字符串提供的方法不能很好的校验，

所以使用正则进行一些复杂校验

使用

创建正则表达式
- 字面量创建 (常用)
  
  let reg = /表达式/；
- 构造函数
  
  let reg=new RegExp('a,c');

有很多具有特殊函数的符号，学会各种符号所表示的含义

使用正则表达式

test()：检索字符串中是否存在指定的值。存在返回true，不存在返回false

正则表达式常用字符含义

\：转义字符，让具有特殊作用的符号，失去特殊作用，只保留本身的符号
^ ：匹配行首，以XXX开头
[ ] ：表示范围区间，只表示一个字符的范围空间

html 复制代码

[0-9][a-z][A-Z][0-9a-zA-Z][0-9|A-Z|a-z]

* ：匹配前面的子表达式任意次
- ：匹配前面的子表达式至少1次
? ：匹配前面的子表达式 0或1次
[^ ]：取反

html 复制代码

[^0-9]：任意的非数字字符
[^a-z0-9A-Z]：除数字，字母之外的任意字符

| ：或者
{ }：位数

html 复制代码

{3}:3位
{3,}:至少3位
{3,6}:3至6位

. ：匹配任意的单个字符
$：匹配末尾，以XXX结尾
g：全局匹配
i：不区分大小写
\w：任何单字字符

html 复制代码

等价于：[a-z0-9A-Z]

\W：任何非单字字符

html 复制代码

等价于：[^a-z0-9A-Z]

\s：任何空白符

html 复制代码

等价于：[\t\n\r\f\v]

\S：任何非空白符

html 复制代码

等价于：[^\t\n\r\f\v]

\d：任何数字

html 复制代码

等价于：[0-9]

\D：除了数字之外的任何字符

html 复制代码

等价于：[^0-9]