表单验证和正则表达式
表单验证
表单：收集用户信息，并把信息发送给服务器程序进行处理
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]