表单验证和正则表达式

表单验证

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

what

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

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

效果实现

• 得焦事件

  ​ 用户输入提示

• 失焦事件

  ​ 用户输入是否为空

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

• 作用：①在用户输入时，给与用户各种输入的反馈提示

   ②真正的控制 表单是否能够进行提交
  

字符串的操作 String 对象

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

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

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

//结果：你
 </script>

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

<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)开始计算返回字符串最后出现的位置

 <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()——把字符串分割为字符串数组

<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()——查看字符串是否以指定的字符串结尾

<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()——提取字符串中两个指定的索引号直接的字符前闭后开

<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()——把字符串转换成大写

<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()——返回一个字符串

 <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开头

• [ ] ：表示范围区间，只表示一个字符的范围空间

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

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

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

• | ：或者
• { }：位数

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

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

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

• \W：任何非单字字符

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

• \s：任何空白符

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

• \S：任何非空白符

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

• \d：任何数字

等价于：[0-9]

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

等价于：[^0-9]