第八章 表单验证和正则表达式 ② 代码
1.课前测试 定义图书json数组 渲染生成表格 >0621 Noname1
定义图书json数组。渲染生成表格。定义图书json数组。渲染生成表格。
并实现添加到购物车（使用模板字符串）
图书数组
[
{“bookId”:1001,“bookName”:“西游记”,“author”:“吴承恩”,“price”:20},
{“bookId”:1002,“bookName”:“xxx”,“author”:“xxx”,“price”:30}
]
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<table id="bookListTable" border="1" align="center">
<thead>
<tr>
<th>图书编号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyBookList">
</tbody>
</table>
<hr/>
<table id="cartTable" border="1" align="center">
<thead>
<tr>
<th>
全选
<input type="checkbox" id="ckAll"/>
</th>
<th>书名</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody id="tbodyCart">
</tbody>
</table>
<script type="text/html" id="bookListTemp">
<td>{BH}</td>
<td>{SM}</td>
<td>{ZZ}</td>
<td>{JG}</td>
<td><input type="button" value="添加" onclick="addBooks(this)"/></td>
</script>
<script type="text/html" id="cartTemp">
<td>
<input type="checkbox" name="ckbook"/>
</td>
<td>{SM}</td>
<td>{JG}</td>
<td>
<input type="button" value="+"/>
<input type="text" value="{SL}"/>
<input type="button" value="-"/>
</td>
<td>{XJ}</td>
<td><input type="button" value="删除"/></td>
</script>
<script type="text/javascript">
var bookAry = [
{"bookId":1001,"bookName":"西游记","author":"吴承恩","price":20},
{"bookId":1002,"bookName":"xxx","author":"xxx","price":30}
];
//生成图书列表
function renderBookList(){
for(var i=0;i<bookAry.length;i++){
//获取遍历到的图书
var b = bookAry[i];
//生成图书的表格行
var tds = bookListTemp.innerHTML
.replace("{BH}",b.bookId)
.replace("{SM}",b.bookName)
.replace("{ZZ}",b.author)
.replace("{JG}",b.price);
//创建tr
var trObj = document.createElement("tr");
trObj.innerHTML=tds;
//将tr添加到tbody中
tbodyBookList.appendChild(trObj);
}
}
//添加图书
function addBooks(btnObj){
//通过点击按钮，找到对应行的图书信息
var trObj = btnObj.parentElement.parentElement;
var bookId = trObj.children[0].innerText;
var bookName = trObj.children[1].innerText;
var author = trObj.children[2].innerText;
var price = trObj.children[3].innerText;
console.log(bookId,bookName,author,price);
//判断添加商品是否存在
if(tbodyCart.children.length>0){
//循环遍历累加
for(var i=0;i<tbodyCart.children.length;i++){
//获取遍历到的当前行
var curTr = tbodyCart.children[i];
//找到书名
var tdBookName = curTr.children[1].innerText;
console.log("=====",i,tdBookName);
//遍历行的书名和要添加的书名是否相等
if(tdBookName==bookName){
//找到数量文本框
var txtQty = curTr.children[3].children[1];
//累加数量
txtQty.value++;
//重新计算小计
curTr.children[4].innerText =
Number(curTr.children[2].innerText)*Number(txtQty.value);
return;
}
}
}
//生成td字符串
var tds = cartTemp.innerHTML
.replace("{SM}",bookName)
.replace("{JG}",price)
.replace("{SL}",1)
.replace("{XJ}",price*1);
//创建tr
var trObj = document.createElement("tr");
trObj.innerHTML=tds;
//将tr添加到tbody中
tbodyCart.appendChild(trObj);
}
//绑定页面加载事件
window.onload=renderBookList;
</script>
</body>
</html>
运行结果如下：
2.字符串的操作
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var str = "花果山孙悟空水帘洞齐天大圣孙悟空";
//document.write("length:"+str.length+"<br/>");
//查找下标是3的位置上是哪个字符
//document.write(str.charAt(3)+"<br/>");
//查找齐天大圣的位置
//indexOf(字符串):自前向后查找目标字符串在主字符串中的位置，
// 找不到返回-1
//var pos = str.indexOf("孙悟空"); //3
//document.write(pos+"<br/>");
//lastIndexOf(字符串):自后向前查找目标字符串在主字符串中的位置，
// 找不到返回-1
//var pos2 = str.lastIndexOf("孙悟空");
//document.write(pos2); //13
//用来判断主字符串中某个内容，是否是唯一的
//includes():是否包含某个字符串 true/false
//document.write(str.includes("孙行者"))
//substr(开始位置,长度):从指定位置开始，截取指定长度的内容
//题目:截取水帘洞
//1.查找水帘洞的位置
//2.从这个位置截取三个字
/*var target = prompt("请输入你要截取的内容","");
var pos = str.indexOf(target);
var res = str.substr(pos,target.length);
alert(res);*/
//substring(开始,结束):从开始位置截取到结束位置，不包含结束
//var res = str.substring(6,9);
//alert(res);
//trim():去除字符串两边的空格
var str = " a b c ";
document.write("["+str+"]<br/>");
document.write(str.length+"<br/>");
str=str.trim();
document.write("["+str+"]<br/>");
document.write(str.length+"<br/>");
//var mystr = "aaa,bbb,ccc,ddd";
//var ary = mystr.split(",");
//data(数组数据),index(数据索引)
/*ary.forEach(function(data,index){
alert(data+" "+index);
})*/
</script>
</body>
</html>
运行结果如下：
3.案例演练 验证邮箱格式
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> my page </title>
<style type="text/css">
</style>
</head>
<body>
邮箱:
<input type="text" name="email" id="email"/>
<input type="button" value="校验" onclick="checkEmail()"/>
<script type="text/javascript">
//校验邮箱是否合法
function checkEmail(){
//234sesef@qq.com
var atPos = email.value.indexOf("@");
var dotPos = email.value.indexOf(".");
//验证邮箱
//1. 含有@和.
if(atPos==-1 || dotPos==-1){
alert("没有@或.，邮箱不合法");
return;
}
//2. @不能为第一位
if(atPos==0){
alert("@是第一位，邮箱不合法");
return;
}
//3. .不能是最后一位
if(dotPos==email.value.length-1){
alert(".是最后一位,邮箱不合法");
return;
}
//4. @和.不能挨着 , .在@后面
if(atPos>dotPos || atPos==dotPos-1){
alert("@不能在.之后，或者@不能挨着.");
return;
}
//5. @不能出现多次
var atPos2 = email.value.lastIndexOf("@");
if(atPos!=atPos2){
alert("@不能出现多次")
return;
}
alert("邮箱正确!!!");
}
</script>
</body>
</html>
运行结果如下：
不太合适的思路：if循环如下
function checkEmail(){
//234sesef@qq.com
//验证邮箱
//1. 含有@和.
//2. @不能为第一位
//3. .不能是最后一位
//4. @和.不能挨着 , .在@后面
//5. @不能出现多次
if( email.value.includes("@")==true && email.value.includes(".")==true ){
if(email.value.startsWith("@")!=true && email.value.endsWith(".")!=true){
if( email.value.indexOf(".") > email.value.indexOf("@") && email.value.indexOf("@")+1!=email.value.indexOf(".") ){
if(email.value.indexOf("@")==email.value.lastIndexOf("@")){
alert("输入正确！");
}else{
alert("输入错误1！@出现多次");
}
}else{
alert("输入错误2！@和.挨着或者.在@后前面");
}
}else{
alert("输入错误3！@为第一位 或者.是最后一位 ");
}
}else{
alert("输入错误4！不含有@和.");
}
}
这种方式校验邮箱比较有局限性，判断条件的优先级是从外到内。如果外部if判断条件符合条件，程序将会停止，意味着内部if判断将不需要再接受判断。
仔细想想，上方的思路好像也有判断条件优先级的局限性。
4.表单验证使用 案例演练 用户注册
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
.err{
color:red;
font-size:12px;
font-weight:bold;
}
</style>
</head>
<body>
<!--
form的onsubmit事件:
当submit类型的按钮提交时，会触发表单的onsubmit事件
允许/阻止表单提交的处理:
onsubmit="return checkAll()"
当checkAll返回false时，这个值会被返回给onsubmit事件，从而阻止提交
当checkAll返回true时，这个值会被返回给onsubmit事件，从而继续提交
-->
<form action="" method="get" onsubmit="return checkAll()">
<h3>用户注册</h3>
<p>
用户名(4-10个字符):<br/>
<input type="text" name="username" id="username" onblur="checkUsername()"/>
<div id="usernameTip" class="err"></div>
</p>
<p>
密码(6-20个字符):<br/>
<input type="password" name="password" id="password" onblur="checkPassword()"/>
<div id="passwordTip" class="err"></div>
</p>
<p>
手机(11位):<br/>
<input type="text" name="phone" id="phone" onblur="checkPhone()"/>
<div id="phoneTip" class="err"></div>
</p>
<p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</p>
</form>
<script type="text/javascript">
//所有校验，校验三种情况:
//1.非空校验
//2.格式校验
//3.存在性校验(需要后台数据库支持)
//校验用户名是否正确
function checkUsername(){
//非空
if(username.value==""){
//alert("用户名不能为空");
usernameTip.innerHTML="用户名不能为空";
return false;
}
//格式
if(username.value.length<4 || username.value.length>10){
//alert("用户名长度不对")
usernameTip.innerHTML="用户名长度不对";
return false;
}
//用户名正确
usernameTip.innerHTML="";
return true;
}
//校验密码是否正确
function checkPassword(){
//非空
if(password.value.length==0){
passwordTip.innerHTML="密码不能为空";
return false;
}
//格式
if(password.value.length<6 || password.value.length>20){
passwordTip.innerHTML="密码长度必须是6-20";
return false;
}
passwordTip.innerHTML="";
return true;
}
//校验手机是否正确
function checkPhone(){
//非空
if(phone.value.length==0){
phoneTip.innerHTML="手机不能为空";
return false;
}
//格式
if(phone.value.length!=11){
phoneTip.innerHTML="手机必须是11位";
return false;
}
phoneTip.innerHTML="";
return true;
}
function checkAll(){
//alert(123);
//return true;
//校验用户名是否正确
var isUsernameOk = checkUsername();
//校验密码是否正确
var isPwdOk =checkPassword();
//校验手机是否正确
var isPhoneOk = checkPhone();
if(isUsernameOk && isPwdOk && isPhoneOk){
return true;
}
return false;
}
</script>
</body>
</html>
运行结果如下：
5. 表单校验的两种方式 案例演练 优化用户注册
a.通过type=“submit” 结合表单 onsubmit事件完成校验和提交
b.通过任意元素任意事件结合表单的submit()方法完成校验和提交
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
.err{
color:red;
font-size:12px;
font-weight:bold;
}
</style>
</head>
<body>
<!--
使用任意元素的任意事件，触发表单提交。
不再使用submit按钮，不再使用表单的onsubmit事件。
而使用表单的submit()方法
-->
<form action="" method="get" id="frm">
<h3>用户注册</h3>
<p>
用户名(4-10个字符):<br/>
<input type="text" name="username" id="username" onblur="checkUsername()"/>
<div id="usernameTip" class="err"></div>
</p>
<p>
密码(6-20个字符):<br/>
<input type="password" name="password" id="password" onblur="checkPassword()"/>
<div id="passwordTip" class="err"></div>
</p>
<p>
手机(11位):<br/>
<input type="text" name="phone" id="phone" onblur="checkPhone()"/>
<div id="phoneTip" class="err"></div>
</p>
</form>
<hr/>
<span onmouseover="jiaoyan()">提交</span>
<script type="text/javascript">
//所有校验，校验三种情况:
//1.非空校验
//2.格式校验
//3.存在性校验(需要后台数据库支持)
//校验用户名是否正确
function checkUsername(){
//非空
if(username.value==""){
//alert("用户名不能为空");
usernameTip.innerHTML="用户名不能为空";
return false;
}
//格式
if(username.value.length<4 || username.value.length>10){
//alert("用户名长度不对")
usernameTip.innerHTML="用户名长度不对";
return false;
}
//用户名正确
usernameTip.innerHTML="";
return true;
}
//校验密码是否正确
function checkPassword(){
//非空
if(password.value.length==0){
passwordTip.innerHTML="密码不能为空";
return false;
}
//格式
if(password.value.length<6 || password.value.length>20){
passwordTip.innerHTML="密码长度必须是6-20";
return false;
}
passwordTip.innerHTML="";
return true;
}
//校验手机是否正确
function checkPhone(){
//非空
if(phone.value.length==0){
phoneTip.innerHTML="手机不能为空";
return false;
}
//格式
if(phone.value.length!=11){
phoneTip.innerHTML="手机必须是11位";
return false;
}
phoneTip.innerHTML="";
return true;
}
//点击span触发提交
function jiaoyan(){
//校验相关元素
var isUNOk = checkUsername();
var isPwdOk = checkPassword();
var isPhoneOk = checkPhone();
if(isUNOk && isPwdOk && isPhoneOk){
//使用表单元素的submit()方法完成提交
frm.submit();
}
}
</script>
</body>
</html>
运行结果如下：
未省略版：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title> my page </title>
<style type="text/css">
/* 修改css */
.err{
color:red;
font-size:8px;
}
</style>
</head>
<body>
<!--
form的onsubmit事件:
当submit类型的按钮提交时，会触发表单的onsubmit事件
允许/阻止表单提交的处理:
onsubmit="return checkAll()"
当checkAll返回false时，这个值会被返回给onsubmit事件，从而阻止提交
当checkAll返回true时，这个值会被返回给onsubmit事件，从而继续提交
-->
<!-- <form action="" method="get" onsubmit="return checkAll()"> -->
<form action="" method="get" id="frm">
<h3>用户注册</h3>
<p>
用户名(4-10个字符):<br/>
<input type="text" name="username" id="username" onblur="checkUsername()"/>
<div id="usernameTip" class="err"></div>
</p>
<p>
密码(6-20个字符):<br/>
<input type="password" name="password" id="password" onblur="checkPassword()" />
<div id="passwordTip" class="err"></div>
</p>
<p>
手机(11位):<br/>
<input type="text" name="phone" id="phone" onblur="checkPhone()"/>
<div id="phoneTip" class="err"></div>
</p>
<!-- <p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</p>
-->
<!-- <p onclick="jiaoyan()">提交</p> -->
<p onmouseover="jiaoyan()">提交</p>
</form>
<script type="text/javascript">
//所有校验，校验三种情况:
//1.非空校验
//2.格式校验
//3.存在性校验(需要后台数据库支持)
//校验用户名是否正确
function checkUsername(){
//非空
if(username.value==""){
//alert("用户名不能为空");
usernameTip.innerHTML="用户名不能为空";
return false;
}
//格式
if(username.value.length<4 || username.value.length>10){
//alert("用户名长度不对")
usernameTip.innerHTML="用户名长度不对";
return false;
}
//用户名正确
usernameTip.innerHTML="";
return true;
}
//校验密码是否正确
function checkPassword(){
//非空
//格式
if(password.value==""){
//alert("用户密码不能为空");
passwordTip.innerHTML="用户密码不能为空";
return false;
}
if(password.value.length<6 || password.value.length>20){
//alert("用户密码长度不对")
passwordTip.innerHTML="用户密码长度不对";
return false;
}
passwordTip.innerHTML="";
return true;
}
//校验手机是否正确
function checkPhone(){
//非空
//格式
if(phone.value==""){
//alert("手机号码不能为空");
phoneTip.innerHTML="手机号码不能为空";
return false;
}
if(phone.value.length!=11){
//alert("手机长度不对")
phoneTip.innerHTML="手机长度不对";
return false;
}
phoneTip.innerHTML="";
return true;
}
function checkAll(){
//alert(123);
//return true;
//校验用户名是否正确
var isUsernameOk = checkUsername();
//校验密码是否正确
var isPwdOk =checkPassword();
//校验手机是否正确
var isPhoneOk = checkPhone();
if(isUsernameOk && isPwdOk && isPhoneOk){
return true;
}
return false;
}
function jiaoyan(){
/*
var isUsernameOK = checkUsername();
var isPwdOK = checkPassword();
var isPhoneOk = checkPhone();
if(isUsernameOK && isPwdOk && isPhoneOK){
//使用表单元素的submit()方法完成提交
frm.submit();
}*/
var isUsernameOk = checkUsername();
var isPwdOk =checkPassword();
var isPhoneOk = checkPhone();
if(isUsernameOk && isPwdOk && isPhoneOk){
frm.submit();
}
}
</script>
</body>
</html>
6.正则表达式 案例演练 验证手机格式
RegExp(正则表达式):RegExp（正则表达式）https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp
代码如下：
<!DOCTYPE html>
<html>
<head>
<title> my page </title>
<style type="text/css">
</style>
</head>
<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");
//RegExp(正则表达式):https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp
//校验目标是否包含一个数字
//\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>
</html>
运行结果如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118160.html
