本文介绍了如何通过表单验证确保用户输入的有效性，包括邮箱、手机号和身份证的校验，同时深入讲解了正则表达式的应用，如创建及使用规则进行复杂格式检查。通过实例演示了如何在前端完成数据校验，提升用户体验和数据准确性。
第八章 表单验证和正则表达式 ① 笔记
课前测：
定义图书json数组。渲染生成表格。
并实现添加到购物车（使用模板字符串）
图书数组
[
{“bookId”:1001,“bookName”:“西游记”,“author”:“吴承恩”,“price”:20},
{“bookId”:1002,“bookName”:“xxx”,“author”:“xxx”,“price”:30}
]
回顾：
本章目标
知道表单验证
会使用正则表达式
能看懂简单的正则表达式
能写简单的正则表达式
第一节：表单验证
1.什么是表单验证
表单：搜集用户信息，并且将信息发送给指定的服务器程序处理。信息必须符合格式才能向后台提交。
如果没有javaScript 此时数据的校验只能在 后台服务器端完成，
后果：浪费资源，浪费时间，降低服务器的效率。在js校验数据格式。如果符合格式，可以提交，否则，不能提交。
如果有javaScript : 直接在客户端进行 数据格式的校验，不需要经过后台，也就是说，只要数据能发送倒到后台，就说明这个数据一定是后台需要的数据。
表单验证的作用：验证数据的格式，将后台需要的数据格式 发送到后台。
例如：手机号，身份证号，邮箱等。
2. 字符串的操作
length属性 ：获取字符串的长度
操作方法
参考:https://www.w3school.com.cn/js/js_string_methods.asp 点击链接，跳转观看
案例：验证邮箱格式
<input type="text" id="email"/>
<script type="text/javascript">
//验证邮箱
//1.含有@和.
//2.@不能为第一位
//3. .不能是最后一位
//4.@和.不能挨着
</script>
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<!--
表格: 呈现数据
表单: 收集用户数据,传给服务器
表单校验: 将用户填写的表单内容的数据，在向服务器发送之前，进行校验
a.非空校验
b.格式校验
c.存在性校验
-->
<!--
校验邮箱是否合法:
正确邮箱:
werw2342@qq.com
错误:
@qq.com
2323@asdf@qq.com
8089.sdfsd@com
正确邮箱的格式:
1.有@，有.
2.@在.的前面
3.@不能有多个
4.@不能开头,.不能做结束
-->
邮箱:
<input type="text" name="email" id="email"/>
<input type="button" value="校验" onclick="checkEmail()"/>
<script type="text/javascript">
//校验邮箱
function checkEmail(){
//alert("测试");
//校验邮箱的步骤:
//1.获取邮箱文本框的内容
var emailStr = email.value;
//alert(emailStr);
//2.校验邮箱字符串是否符合规则
//a.有@，有.
// indexOf:查找特定字符串在目标字符串中的位置，
// 如果不存在返回-1
var pos1 = emailStr.indexOf("@");
var pos2 = emailStr.indexOf(".");
if(pos1==-1 || pos2==-1){
alert("邮箱没有@或者没有点,格式非法");
//终止方法执行
return;
}
//b.@在.的前面
if(pos1>pos2){
alert("点在@的前面，邮箱格式不合法");
return;
}
//c. @不能有多个
//从后向前查找@，如果与之前@的位置不一样，则说明存在多个@
var pos3 = emailStr.lastIndexOf("@");
if(pos1!=pos3){
alert("@存在多个，邮箱格式不合法");
return;
}
//d.@不能开头,.不能做结束
// startsWith:判断某个字符串是否以指定字符串开始
// endsWith:判断某个字符串是否以指定字符串结束
if(emailStr.startsWith("@")){
alert("@不能作为邮箱开头,邮箱格式不合法");
return;
}
if(emailStr.endsWith(".")){
alert(".不能作为邮箱的结束,邮箱格式错误");
return;
}
alert("恭喜!邮箱格式正确!");
//正则表达式
}
</script>
</body>
</html>
3.表单验证使用
3.1 表单校验的两种方式
a.通过type=“submit” 结合表单 onsubmit事件完成校验和提交
b.通过任意元素任意事件结合表单的submit()方法完成校验和提交
3.2 表单校验实例
模拟信息注册页面
onsubmit:表单提交事件,当点击了type="submit"类型的按钮时,提交事件会被触发
如果要阻止onsbumit事件的继续触发，要为onsubmit返回一个false
onsubmit="return false" : 不会向服务器提交数据
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<body>
<!--
onsubmit:表单提交事件,当点击了type="submit"类型的按钮时,提交事件会被触发
如果要阻止onsbumit事件的继续触发，要为onsubmit返回一个false
onsubmit="return false" : 不会向服务器提交数据
-->
<form onsubmit="return checkAll()">
<h1>学生注册</h1>
<p>
<!--onblur:只做当前文本框的数据校验，它不会触发表单提交-->
<input type="text" name="xm"
id="xm"
placeholder="请输入姓名"
onblur="checkXM()"/>
</p>
<p>
<input type="radio" name="sex" id="man" value="男" />男
<input type="radio" name="sex" id="woman" value="女"/>女
</p>
<p>
<input type="text" name="phone" id="phone" placeholder="请输入手机"/>
</p>
<p>
<input type="submit" value="注册"/>
</p>
</form>
<script type="text/javascript">
//表单校验:在提交事件提交数据给服务器之前，应该进行数据校验
//校验姓名
function checkXM(){
if(xm.value==""){
alert("姓名不能为空");
}
}
//校验数据
function checkAll(){
//alert("123");
//数据校验
//校验失败返回false
//1.校验姓名
if(xm.value==""){
alert("姓名不能为空");
return false;
}
//2.校验性别
if(man.checked==false && woman.checked==false){
alert("请选择性别");
return false;
}
//3.校验手机号
if(phone.value==""){
alert("手机不能为空");
return false;
}
//如果校验成功返回true
return true;
}
</script>
</body>
</html>
第二节：正则表达式
1.什么是正则表达式
正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。
许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。正则表达式这个概念最初是由Unix中的工具软件（例如sed和grep）普及开的。正则表达式通常缩写成“regex”，单数有regexp、regex，复数有regexps、regexes、regexen。
2.为什么要用正则表达式
有一些比较复杂的校验使用字符串提供的方法不能很好的校验，那么此时就使用 正则进行一些复杂校验。例如：身份证号，手机号，只能输入汉字校验。。。。
3.正则表达式使用
使用的方式: 定义一个规则(正则表达式)，去测试目标内容是否符合这个规则。
创建正则表达式 （2种方式）
//创建对象的方式创建正则
var 变量名=new RegExp(“表达式”,”附加参数”);
//字面量方式创建正则
var 变量名=/表达式/附加参数
附加参数：g(global):全局匹配 i(ignoreCase):不区分大小写
使用正则表达式
1.会使用正则表达式
2.能看懂简单的正则表达式
3.会写简单的正则表达式
4.正则表达式常用字符含义
a.内容通配符: . \d \s \w \D \S \W [] [^]
b.次数限定符: * + ? {n,m} {n,}
c.边界限定符: ^ $
校验手机号
<body>
手机:
<input type="text" id="phone"/>
<input type="button" value="测试" id="btn"/>
<script type="text/javascript">
//手机: 11位数字 131,135,137开头
btn.onclick=function(){
//定义正则，校验手机框中是否填写了数字
//校验目标是否包含一个数字
//var r = new RegExp("\\d");
//校验目标是否包含一个数字
//\d:匹配一个数字
//^:匹配开始位置 $ 匹配结束位置 没有边界符号，默认做部分匹配
//{}:次数限定符
//[]:匹配中括号中的一个内容
var r = /^13[157]\d{8}$/;
//var r = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/ //注意 |也作为[ ]中判定的一部分
//邮箱: 字母数字下划线{} @ 字母数字下划线{} . com
// \w+@\w+\.com
//test():返回true/false
if(r.test(phone.value)){
alert("是合格的手机号");
}else{
alert("格式不对");
}
//exec():返回匹配到的内容
//var res = r.exec(phone.value);
//alert(res);
}
</script>
</body>
<script type="text/javascript">
// \d 数字
// \w 字母数字下划线
// . 匹配任意内容
// [\u4e00-\u9fa5] 匹配一个汉字
//var str = "s张x";
//var reg = /[\u4e00-\u9fa5]/;
//alert(reg.exec(str));
//次数限定符: {3,5}
//姓名2-5个字: /^[\u4e00-\u9fa5]{2,5}$/
// * : 匹配前面的一个内容，任意次(0,多次)
// + : 匹配前面的一个内容，至少一次（1，多次）
// ? : 匹配前面的一个内容，最多一次(0,1次)
//匹配开头是s结束是n，中间有任意个的内容
/*var str = "sn";
var reg = /s.?n/;
alert(reg.exec(str));*/
// 参数: g(全局匹配) i(忽略大小写)
//var str = "abc";
//var reg = /B/i;
//alert(reg.exec(str));
var str = "abcxxxxabcqqqabc";
var reg = /abc/g;
//第一次匹配
var res = reg.exec(str);
document.write(res+" "+res.index+"<br/>");
//console.log(res);
//第二次匹配
res = reg.exec(str);
document.write(res+" "+res.index);
</script>
1.会使用正则
打开百度—》搜索需要的正则表达式–》拷贝使用
//邮箱验证
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var e = prompt("请输入邮箱");
if(reg.test(e)){
alert("格式正确")
}else{
alert("格式错误")
}
//手机号验证
var reg = /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{
var e = prompt("请输入手机号");
if(reg.test(e)){
alert("格式正确")
}else{
alert("格式错误")
}
2.能看懂一些简单的正则
3.能写一些非常简单的正则
总结：
熟练使用表单验证，可以为表单验证添加特效。
掌握正则表达式中的符号的特殊含义
会使用正则表达式
能看懂简单的正则表达式
会写简单的正则表达式
作业：
1.课堂案例熟练完成
2.自定义邮箱格式正则验证
3.自定义手机号格式正则验证
4.自定义身份证号的正则验证（15位或18位，年月日，尾数为字母或数字）
5.定义汉字在2-5之间的验证
6.将之前讲过的表单验证改为用正则表达式校验
7.制作登记学生信息的表单页面，校验学生姓名格式，手机格式，身份证格式，邮箱格
式，年龄格式是否正常
8.在之前练习“发表说说”的基础上增加内容校验处理，如果发布的内容含有敏感信息
（脏话，暴力…），则进行屏蔽，用*替换内容。
9.自己学习《30分钟入门正则表达式》,会使用正则表达式工具
578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
