**
表单 正则表达式
**
目标：
知道表单验证
会使用正则表达式
能看懂简单的正则表达式
能写简单的正则表达式
一、表单验证
1.什么是
表单：搜集用户信息，并且将信息发送给指定的服务器程序处理。信息必须格式才能向后台提交。
如果没有javaScript 此时数据的校验只能在 后台服务器端完成，
后果：浪费资源，浪费时间，降低服务器的效率。在js校验数据格式。如果符合格式，可以提交，否则，不能提交。
如果有javaScript : 直接在客户端进行 数据格式的校验，不需要经过后台，也就是说，只要数据能发送倒到后台，就说明这个数据一定是后台需要的数据。
表单验证的作用：验证数据的格式，将后台需要的数据格式 发送到后台。
**例如：**手机号，身份证号，邮箱等。
2、验证 字符串的判断操作
| charAt() | 返回在指定位置的字符。 |
|---|---|
| concat() | 连接两个或更多字符串，并返回新的字符串。 |
| indexOf()* | 返回某个指定的子字符串值在字符串中首次出现的位置。 |
| includes()* | 查找字符串中是否包含指定的子字符串。是返回true,否则false |
| lastIndexOf() | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 |
| replace() | 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| split() | 把字符串分割为字符串数组。 |
| startsWith() | 查看字符串是否以指定的子字符串开头。 |
| endsWith() | 查看字符串是否以指定的子字符串结尾。 |
| *substr(起始索引,提取的长度) | 从起始索引号提取字符串中指定数目的字符。 |
| *substring() | 提取字符串中两个指定的索引号之间的字符。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| trim() | 去除字符串两边的空白。 |
| toString() | 返回一个字符串。 |
案例
charAt
var arr='sdfasdfasdf'
alert(arr.charAt(4));//返回指定位置的字符s
concat
拼接字符串
var arr="sdfasdfasdf"
var arr1="你好哈哈哈"
var arr2=arr.concat(arr1);
alert(arr2);//sdfasdfasdf你好哈哈哈
indexOf
返回子字符第一次出现的位置
var arr="sdfasdfasdf"
var arr1="你好哈哈哈"
alert(arr1.indexOf("你"));//0
includes（）
注意不提示
var arr="sdfasdfasdf"
var arr1="你好哈哈哈"
//查找字符串是否存在 存在true 不存在false
var a=arr1.includes("2");
alert(a);//false
lastIndeOf
注意是从后门开始找
var arr="sdfasdfasdf"
var arr1="你好哈哈哈"
//从后向前搜索 并从起始位0开始计算字符串最后出现的位置
var a=arr1.lastIndexOf("哈");
alert(a);//返回的是4位置
replace
替换
var arr="sdfasdfasdf"
var arr1="你好哈哈哈"
var a= arr1.replace("你","sdf");
alert(a); //替换
slice（start，end）
片段截取
/* start必须。 要抽取的片断的起始下标，
第一个字符位置为 0。如果为负数，则从尾部开始截取
end可选。 紧接着要截取的片段结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
*/
var arr="sdfasdfasdf"
var arr1="你好哈哈哈"
var a=arr1.slice(1,2);
alert(a);//好
split（）
待更新
split()把字符串分割为字符串数组。
string.split(separator,limit)
var arr="sdfasdfasdf"
var arr1="你好哈哈哈"
//split()把字符串分割为字符串数组。
var a=arr1.split("");
alert(a)
startsWith
var arr1="你好哈哈哈"
//startsWith()查看字符串是否以指定的子字符串开头是的就为true 否则为false
var a=arr1.startsWith("你");
alert(a);//true
endWith（）
var arr1="你好哈哈哈"
//endsWith()查看字符串是否以指定的子字符串结尾。
var a=arr1.endsWith("哈")
alert(a);//true 最后一位
substr（ start ，length）
var arr1="你好哈ni哈哈"
//*substr(起始索引,提取的长度)从起始索引号提取字符串中指定数目的字符。
var a= arr1.substr("0",2);
alert(a);//你好
substring
var arr1="你好哈ni哈哈"
var a=arr1.substring("2","5");
alert(a);//哈ni 提取字符串中两个指定的索引号之间的字符串；
toUpperCase
大写
tpLowerCase
小写
var arr="sdfasdfasdf"
var arr1="你好哈ni哈哈"
var a =arr.toUpperCase(2);//转大写
var b=a.toLowerCase();//转小写
alert(a);//SDFASDFASDF
alert( b);//sdfasdfasdf
trim
去除字符俩边的空格
var arr1=" 你好哈ni哈哈 "
alert(arr1.trim());/删除字符串两边空格 只能是俩边
toString（）
返回字符串的内容
var arr="sdfasdfasdf"
var a=arr.toString();
alert(a);
3、表单验证的使用
模拟注册。用户名 加油箱
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aaa > div{
display: none;
}
</style>
</head>
<body>
<form action="http://www.baidu.com" onsubmit="return tj()">
<fieldset id="" style="width: 500px; margin: auto; ">
<legend>表单验证</legend>
<table border="" cellspacing="" cellpadding="" onsubmit="return tj()">
<tr>
<td>
用户名：
</td>
<td>
<input type="" name="" id="" value="" class="inp" onblur="bbb(this)" placeholder="请输入用户名"/>
<div class="aaa">
<div id="">必须以字母kt，长度为6---16</div>
<div id="">格式错误</div>
<div id="">格式正确</div>
</div>
</td>
</tr>
<tr>
<td>
邮箱：
</td>
<td>
<input type="" name="" id="" value="" onblur="ccc(this)" class="inp" placeholder="请输入邮箱"/>
<div class="aaa">
<div id="">必须以@还有.的正确格式</div>
<div id="">格式错误</div>
<div id="">格式正确</div>
</div>
</td>
</tr>
</table>
<input type="submit" name="" id="" value="提交" />
</fieldset>
</form>
<script type="text/javascript">
var inpuArr=document.getElementsByClassName("inp")
for(var i=0;i<inpuArr.length;i++){
inpuArr[i].onfocus=function(){
//判断焦点 给样式
var str=this.nextElementSibling.children[0];
str.style.display="block";
}
}
//失去 就开始进行判断 正则表达式
function bbb(a){
var zz=/^[a-zA-Z]\w{5,15}$/;
if(a.value !=""){
if(zz.test(a.value)){
a.nextElementSibling.children[2].style.display="block";
a.nextElementSibling.children[0].style.display="none";
a.nextElementSibling.children[1].style.display="none";
}else{
a.nextElementSibling.children[1].style.display="block";
a.nextElementSibling.children[1].style.backgroundColor="red";
}
}else{
a.nextElementSibling.children[1].style.display="none";
a.nextElementSibling.children[2].style.display="none";
}a.nextElementSibling.children[0].style.display="none";
}
function ccc(a){
var zz=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(a.value !=""){
if(zz.test(a.value)){
a.nextElementSibling.children[2].style.display="block";
a.nextElementSibling.children[0].style.display="none";
a.nextElementSibling.children[1].style.display="none";
}else{
a.nextElementSibling.children[1].style.display="block";
a.nextElementSibling.children[1].style.backgroundColor="red";
}
}else{
a.nextElementSibling.children[1].style.display="none";
a.nextElementSibling.children[2].style.display="none";
}a.nextElementSibling.children[0].style.display="none";
}//判断格式是否正确正确可以不正确不可以 判断另一个的样式是不是红色 如果是红色就不能提交
function tj(){
for(var i=0;i<inpuArr.length;i++){
var ys=inpuArr[i].nextElementSibling.children[1];
if(inpuArr[i].value==""||ys.backgroundColor=="red"){
return false;
}else{
return true;
}
}
}
</script>
</body>
</html>
二、正则表达式
1、什么是
正则表达式，又称规则表达式**。**（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。
许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。
2、为什么要用
有一些比较复杂的校验使用字符串提供的方法不能很好的校验，那么此时就使用 正则进行一些复杂校验。例如：身份证号，手机号，只能输入汉字校验。。。。
3、怎么用
-
创建正则表达式
附加参数：g(global):全局匹配 i(ignoreCase):不区分大小写
var 变量名=new RegExp(“表达式”,”附加参数”);
var reg=/表达式/附加参数
-
使用正则表达式
include 全等于
test() 检索字符串中是否存在指定的值。存在返回 true 不存在返回 false。 exec() 检索字符串中的正则表达式的匹配。如果存在返回该字符串，不存在返回null 自己了解 1.会使用正则表达式
2.能看懂简单的正则表达式
3.会写简单的正则表达式
4、常用字符
| 符号 | 含义 |
|---|---|
| . | 匹配任意字符 一位 |
| \ | 转义字符：在正则中有很多符号都有特殊含义，当我们不想使用特殊含义，只需要使用符号本身时，可以使用\转义符。 |
| [] | 表示范围 |
| {} | 限定位数 {n}代表匹配n位；{n,}代表至少匹配n位；{n,m}匹配n-m位 |
| * | 匹配前边子表达式任意次 |
| + | 匹配前边子表达式1次或者多次 （大于等于1次） |
| ? | 匹配前边子表达式0次或者1次 |
| ^ | 匹配行首 以 XXX 开头 |
| $ | 匹配末尾 以XXX结尾 |
| | | 表示或者 |
| () | 表示一个整体 |
| [^…] | 不在括号字符范围内的任意字符 |
| \w | 任何单字字符, 等价于[a-zA-Z0-9] |
| \W | 任何非单字字符,等价于[ ^a-zA-Z0-9] |
| \s | 任何空白符,等价于[\t \n \r \f \v] |
| \S | 任何非空白符,等价于[ ^\ t \ n \ r \ f \ v] |
| \d | 任何数字,等价于[0-9] |
| \D | 除了数字之外的任何字符,等价于[ ^0-9] |
总结
熟练使用表单验证，可以为表单验证添加特效。
掌握正则表达式中的符号的特殊含义
会使用正则表达式
能看懂简单的正则表达式
会写简单的正则表达式