网站导航
> 文章列表 > JavaScript(超级无敌认真好用，万字收藏篇!!!!)

JavaScript(超级无敌认真好用，万字收藏篇!!!!)

网友: 文章列表 2024-03-21 20:49:46

JavaScript(超级无敌认真好用，万字收藏篇!!!!)

文章目录

  • JavaScript
    • 1. JS的基本介绍
      • 1.1 什么是JavaScrpit
      • 1.2 JS的基本使用
    • 2. JS的基本语法
      • 2.1 JS中的数据类型
      • 2.2 JS中变量的声明和使用
      • 2.3 JS中的流程控制语句
      • 2.4 JS中数组的使用
    • 3 JS中函数的使用
      • 3.1 函数的创建和调用
      • 3.2 打印三角形案例理解JS中的函数
      • 3.3 JS中对象的使用
    • 4 JS的DOM编程
      • 4.1 DOM编程实现计算器
      • 4.2 DOM编程实现随机点名
      • 4.3 DOM编程实现动态时间
      • 4.4 DOM编程实现全选全不选功能
      • 4.5 DOM编程实现级联效果
      • 4.5 DOM编程实现页面上自由移动的DIV
    • 5 Cookie的使用
      • 5.1 向浏览器中存储cookie
      • 5.2 使用Cookie实现登录效果
      • 5.3 使用JSON添加注册
    • 6 表单验证技术
      • 6.1 正则表达式
      • 6.2 基于编程式表单验证(基本不用)
      • 6.3 基于正则表达式的表单验证
      • 6.4 及时校验

JavaScript

1. JS的基本介绍

1.1 什么是JavaScrpit

  • JavaScript是一个运行在浏览器的脚本语言
  • JavaScript也是基于对象的编程语言(和Java的相似)
  • JavaScript过于灵活，难度虽然不大，但难以掌握
  • JavaScript是松散类型语言
  • JavaScript主要用于在前端界面编写动态效果，和前端验证。

1.2 JS的基本使用

  1. 标签引用

写在Script标签里<scrpit> JavaScrpit代码</scrpit>

  • 例如:

    <script>for(var i =0;i<10;i++){document.write(i);}
</script>
  1. 文件引用

在单独JS文件里编写JavaScript，然后在HTML文件使用<script>标签进行引用

  • 例如:

    <script src="文件名.js"></script>

2. JS的基本语法

2.1 JS中的数据类型

JS是一种弱类型编程语言，只包含四种类型

①数字类型(number)：整型，浮点型

②字符串类型(string):使用"双引号"，'单引号’括起来的都是字符串(没有字符)

③布尔类型(boolean):false，true

④对象类型( object ):JS中任意对象类型都是object类型

2.2 JS中变量的声明和使用

JS中的变量类型由值决定

JS声明变量时并不指定数据类型，而是由值决定数据类型

int num=10错误

  • JS中变量声明方式:

    ① 变量名=变量值 ：age = 20这种方法不直观且容易产生歧义(在单独声明变量时不建议使用)

    • 注意:如果无声明变量关键字则默认使用var关键字

    ② var 变量名 = 变量值： var age = 20

    • var是JS中声明变量的关键字

    ③let 变量名=变量值: let age = 20(ES5中用于声明变量的关键字)

    • let也是JS中声明变量的关键字

  • 面试题

    var和let这两种声明方式的区别?

    var是用于声明全局变量，就算在一个"代码块"或"函数"中声明的变量，再代码块外依然可以使用；

    let是用于声明局部变量，在"代码块"中声明，作用域仅限在"代码块"中，代码块外不可用；

  • JS中声明常量使用const关键字

2.3 JS中的流程控制语句

  • JS中的流程控制语句与java及其相似，但有少许不同

不同点：

  1. 分支语句

    分支语句的条件可以分为以下三种

    ① boolean类型的 true或false；

    ② number类型的 非0或0 （非0即true） ；

    ③ sring类型的 空字符串和非空字符串(非空字符串即为true)

    ④ object类型的 非null或null （非null即ture） ，还可以是存在或不存在（存在即ture）；

  2. 循环语句

    • for循环

      • javaScrpit中有两种foreach循环

        其中for-in循环中数组前的变量循环的是数组的索引

        而for-of循环才等同于java中的foreach循环，数组前的变量循环的是数组中的每个元素.

               let nums=[4,5,4,5,54,6,4,5,64];//传统for循环document.write("<hr />")for(let i=0;i<nums.length;i++){document.write(nums[i]+"<br />");}/* foreach循环* for in 循环* for in循环中数组前的变量存储的是数组的索引*/document.write("<hr />")for(let num in nums){//num中存储的数组的索引document.write(nums[num]+"<br />");}document.write("<hr />")/* for of循环* 等同于java中的foreach循环，将数组中的每个元素给数组前的变量*/for(let num of nums){//num中存储的是数组中的元素document.write(num+"<br />");	}

    foreach也可以循环对象

    for-in 循环遍历的是对象中的所有属性名

    for-of 循环不可用，会报错 obj is not iterable

    要想遍历循环中的所有属性值，则用for-in循环,遍历 对象[对象前的变量]

    			//创建一个JS对象let obj =new Object();//定义对象的属性obj.username="小花";obj.age=18;obj.sex="男";//遍历对象中的所有属性//将对象中的属性名变量for(let att in obj){document.write(obj[att]+"<br />")}

2.4 JS中数组的使用

  • JS中的数组是变长数组

1. 声明数组的方式(两种)

① 通过字面量方式

            let nums=[];//声明一个空数组，使用字面量方式let numbers=[5,12,16,54,6];for(let num of numbers){document.write(numbers[num])}

② 通过声明对象方式

           //通过声明对象的方式声明数组let arr=new Array();let arr=new Array(2);//声明长度为2的数组arr[0]=56;arr[1]=30;arr[2]=45;for (let num of arr) {document.write(num+"<br />")}

2 为数组中的元素赋值

① 通过索引赋值

该方法赋值时比较灵活

            let nums=[];//声明一个空数组，使用字面量方式nums[0] = 45;nums[1] = 45;
  • 赋值时必须知道索引

② 向数组尾部添加元素

无需考虑索引问题，但它只能为数组尾部添加新值

使用push函数向数组尾部添加元素

let nums=[];//声明一个空数组，使用字面量方式
nums.push(199);
nums.push(12,54,65,1,65,5,56)

3 JS中函数的使用

JS中函数等同于Java中的方法

  • Java中的方法

    ① 修饰符

    ② 返回类型

    ③ 方法名

    ④ 参数列表

    ⑤ 异常列表

    ⑥ 方法体

  • JavaScript的函数

    ①function关键字

    ② 函数名

    ③ 参数列表

    ④ 函数体

3.1 函数的创建和调用

  1. 函数的创建

  • 使用函数声明创建一个函数

    例:

    /function 函数名([形参1,形参2,...,形参n]) {函数体
}
*/
function say(){		document.write("你好，欢迎使用函数声明创建一个函数");		
}

  • 使用函数表达式创建一个函数

    例:

    /var 函数名 = function([形参1,形参2,...,形参n]) {函数体
}
*/
var say =function(){		document.write("你好，欢迎使用函数");		
}
  1. 函数的调用

  • JS中自定义的函数如果不调用，则不会执行

  • 在JS中使用"事件"调用对象函数

  • JS是以"事件"驱动的，在HTML标签中都存在相关事件

    ① 单机事件 ②鼠标悬浮事件 ③ 鼠标离开事件 ④ 值改变事件 ⑤ 键盘按下事件

  • 调用函数

    例:

    //函数声明
function say(){	document.write("你好，欢迎使用函数声明创建一个函数");	}
//调用函数
say();

    用事件调用

    <button onclick="say()"> 按钮 </button><script>function say(){document.write("你好，欢迎使用");}
//		say();</script>

3.2 打印三角形案例理解JS中的函数

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>#printDiv{margin: 0 auto;height: 600px;width: 800px;border: 1px solid red;color: red;}</style><body><input type="text" name="number" id="num" /><button onclick="printStart()">打印小星星</button><div id="printDiv"></div><script>function printStart(){//从页面获得该事件let inputObj =document.getElementById("num");let num=parseInt(inputObj.value);let divObj =document.getElementById("printDiv");//清空原有的数据divObj.innerHTML="";for (var i =0 ;i <num ;i++) {for (var j =0 ; j<num-i ;j++) {
//						document.write("&nbsp;&nbsp;&nbsp;");divObj.innerHTML=divObj.innerHTML+"&nbsp;&nbsp;&nbsp;";}for (var j =0 ; j<2*i+1 ;j++) {
//						document.write("&nbsp;*&nbsp;")divObj.innerHTML=divObj.innerHTML+"&nbsp;*&nbsp;";}
//                  document.write("<br />")divObj.innerHTML=divObj.innerHTML+"<br />";}	}	</script></body>
</html>

innerHTML:向html标签写入内容，innerHTML写入的内容为HTML标签元素则会被浏览器解释执行

innerText:向html标签写入内容，innerHTML写入的内容为HTML标签元素不会被浏览器解释执行，原样输出

3.3 JS中对象的使用

JS是一种基于对象的语言，JS中存在对象

1.JS中包含3类对象

①JS内置对象(内建对象)

  • JS内部定义好的对象，可以直接使用:

    如：String，Date，Array，Math…

②宿主对象

  • BOM：浏览器对象(浏览器对象模型，不在使用)
  • DOM：网页对象(文档对象模型)

③自定义对象

  • 开发者自己定义或创建的对象

PS:JS中的方法和属性你说他有他就有

2.JS自定义对象方式

①使用JS内置Object对象直接创建对象

let obj =new Object()
  • 我们可以根据需要为obj对象设置属性和方法

②使用字面量方式创建对象

let obj={}//声明一个空对象

③使用字面量方式声明一个带有属性的对象

let obj={Phone:"123456",addr:'陕西省西安市'
}

④使用构造函数创建对象

function Student(stuId,stuName,stuAge){//对象中的属性this.stuId=stuIdthis.stuName=stuNamethis.stuAge=stuAge
}
let student =new Student(101,小明,18)
console.log(student)

  • 通过原型模式为对象增加原型属性

    • 原型属性为该类所有对象的共享属性，通过该构造函数创建的对象都存在该属性，而且是共享的

      Student.prototype.stuSex="男

    • 如果对象中存在一个原型属性同名的属性，则对象的属性会覆盖原型属性

4 JS的DOM编程

JS把页面当成当成document对象，里面包含HTML属性

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML 事件
  • 换言之：HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。

4.1 DOM编程实现计算器

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>.c1{background: cornflowerblue;margin: 0px auto;width: 360px;height: 400px;border-radius: 15px;text-align: center;font-size: 20px;border: 1px solid aquamarine; 	}button{margin-top: 10px;margin-left: 4px;width: 80px;height: 50px;border: 1px solid aquamarine;border-radius: 15px;}button:hover{background-color: palegoldenrod;}input{margin-top: 10px;width: 200px;height: 40px;border: 1px solid aquamarine;border-radius: 5px;}</style><body><div class="c1"><h2 align="center">计算器</h2><form name="calForm"><table align="center"><tr><td>num1:</td><td><input type="text" name="num1"/></td></tr><tr><td>num2:</td><td><input type="text" name="num2"/></td></tr><tr><td colspan="2"><button type="button" onclick="cal('+')"> + </button><button type="button" onclick="cal('-')"> - </button><button type="button" onclick="cal('*')"> * </button><button type="button" onclick="cal('/')"> / </button></td></tr><tr><td>结果:</td><td><input type="text" name="result" disabled="disabled" /></td></tr></table></form></div><script >function cal(fuhao){let num1 = parseInt(document.calForm.num1.value);let num2 = parseInt(document.calForm.num2.value);let resultObj = document.calForm.result;let result;switch(fuhao){case '+':result = num1 + num2;break;case '-':result = num1 - num2;break;case '*':result = num1 * num2;break;case '/':if(num2==0){alert("除数不能为零");return;}result = num1 / num2;break;}resultObj.value = result;
//				 console.log(resultObj.value = result)}</script></body>
</html>

4.2 DOM编程实现随机点名

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>.container{margin: 0 auto;height: 600px;width: 300px;/* border: 1px solid red; 	 */display: flex;flex-direction: column;align-items: center;justify-content: center;}#num{margin: 0 auto;height: 150px;width: 300px;/* border: 1px solid red; 	 */background-color: yellow;text-align: center;font-size: 50px;display: flex;flex-direction: column;align-items: center;justify-content: center;color:red;margin-bottom: 10px;}#btnDiv{margin: 0 auto;height: 40px;width: 300px;/* border: 1px solid red; 	 */text-align: center;}#btnDiv button{width: 90px;height: 40px;border: 0px;border-radius: 5px;border: 0px solid red; background-color: orange;color: #fff;}#btnDiv button:hover{cursor: pointer;background-color: darkorange;border: 1px solid red; }#btnDiv button:active{border: 2px solid beige; }</style><body><div class="container"><div id="num"></div><div id="btnDiv"><button onclick="clickStart()">开始</button><button onclick="stop()">暂停</button><button onclick="reset()">复位</button></div></div><script >var menu=["盖浇面","肥牛","一号二楼面","一号二楼米饭","冒菜","双椒鸡拌面"];var index=parseInt(Math.random()*(menu.length));let obj=document.getElementById("num");console.log(menu[index],index)obj.innerHTML=menu[index];var timer=null;//开启单机事件按钮function clickStart(){if(timer!=null){return;}start();}//开始计数function start(){var index=parseInt(Math.random()*(menu.length));obj.innerHTML=menu[index];//延吃器,每100ms调用一次timer=setTimeout(start,10);}//暂停计数器function stop(){//清空延迟器clearTimeout(timer);timer=null;}//复位function reset(){num=0;let obj=document.getElementById("num");stop();}</script></body>
</html>

4.3 DOM编程实现动态时间

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><style>.container{margin: 0 auto;height: 600px;width: 500px;/* border: 1px solid red; 	 */display: flex;flex-direction: column;align-items: center;justify-content: center;}#timer{margin: 0 auto;height: 150px;width: 500px;background-color: yellow;text-align: center;font-size: 40px;display: flex;flex-direction: column;align-items: center;justify-content: center;color:red;margin-bottom: 10px;}</style><body onload="showTime()"><div class="container"><div id="timer"></div></div><script>//展示时间function showTime(){var date =new Date();var obj=document.getElementById("timer");obj.innerHTML=formatTime(date);setTimeout(showTime,1000)}/*格式化时间*/function formatTime(time){let year = time.getFullYear();let month = fillZero(time.getMonth()+1);let day =fillZero(time.getDate());let hour=fillZero(time.getHours());let min=fillZero(time.getMinutes());let sec=fillZero(time.getSeconds());let nowTime=year+"年"+month+"月"+day+"日  "+hour+":"+min+":"+sec;return nowTime;}//为数字前填充0function fillZero(num){return num<10?"0"+num:num;}</script></body>
</html>

4.4 DOM编程实现全选全不选功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><hr/><form><input type="checkbox" name="hobbys"  value="吃饭">吃饭<input type="checkbox" name="hobbys" value="购物">购物<input type="checkbox" name="hobbys" value="听音乐">听音乐<input type="checkbox" name="hobbys" value="网游">网游<input type="checkbox" name="hobbys" value="打球">打球<br/><button onclick="selectAll(true)">全选</button><button onclick="selectAll(false)">全不选</button></form><script>function selectAll(boo){//获得所有同名元素，返回一个数组let hobObjArr=document.getElementsByName("hobbys");for (const hobbys of hobObjArr) {if(hobbys.type=="checkbox"){}hobbys.checked=boo;} }</script>
</body>
</html>

4.5 DOM编程实现级联效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body onload="getProvince()"><label>省份:</label><select name="province" id="province" onchange="getCity()"><option value="">----请选择省份----</option></select><label>城市:</label><select name="city" id="city" onchange="getCounty()"><option value="">----请选择城市----</option></select><label>区县:</label><select name="county" id="county"><option value="">----请选择区县----</option></select><script>let provinceArr = new Array();provinceArr[0] = "陕西省";provinceArr[1] = "山西省";provinceArr[2] = "河南省";provinceArr[3] = "河北省";provinceArr['陕西省'] = ['西安市', '宝鸡市', '咸阳市', '渭南市', '铜川市', '汉中市', '安康市', '商洛市', '延安市', '榆林市']provinceArr['陕西省']['西安市'] = ['雁塔区', '长安区', '未央区', '高新区', '莲湖区']provinceArr['陕西省']['宝鸡市'] = ['渭滨区', '陈仓区', '金台区', '凤翔区', '眉县']provinceArr['陕西省']['渭南市'] = ['临渭区', '华洲区', '蒲城县', '澄城县', '合阳县']provinceArr['河南省'] = ['郑州市', '洛阳市', '开封市', '安阳市']provinceArr['河南省']['郑州市'] = ['中原区', '二七区', '管城区', '金水区', '上街区', '惠济区']provinceArr['河南省']['洛阳市'] = ['老城区', '西工区', '瀍河回族区', '涧西区', '吉利区', '洛龙区', '孟津县']provinceArr['山西省'] = ['太原市', '晋城市', '大同市', '运城市']provinceArr['山西省']['太原市'] = ['小店区', '迎泽区', '杏花岭区', '尖草坪区', '万柏林区']provinceArr['山西省']['晋城市'] = ['泽州县', '阳城县', '沁水县', '陵川县']var proObj, cityObj, countyObj;//生成省份function getProvince() {proObj = document.getElementById("province")for (let province of provinceArr) {//创建城市对象，参数1是显示的值，参数2是value属性let proOption = new Option(province, province);proObj.options.add(proOption);}}//级联城市function getCity() {//获得当前选择的省份cityObj = document.getElementById("city")//清空原有数据cityObj.options.length = 1;let cityValue = proObj.value;if (cityValue == "") {let cityOption = new Option("-----请选择城市-----", '');cityObj.options.add(cityOption);return;}for (const city of provinceArr[cityValue]) {let cityOption = new Option(city, city);cityObj.options.add(cityOption);}}//级联市区function getCounty() {countyObj = document.getElementById("county")let cityValue = proObj.value;let countyValue = cityObj.value;countyObj.options.length = 1;console.log(countyObj.options.length)if (countyValue == "") {let countyOption = new ("----请选择区县----", "")countyObj.options.add(countyOption);return;}for (const county of provinceArr[cityValue][countyValue]) {let countyOption = new Option(county, county);countyObj.options.add(countyOption);}}</script>
</body></html>

4.5 DOM编程实现页面上自由移动的DIV

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head>
<style>#mainDiv {position: absolute;width: 500px;height: 400px;border: 1px red solid;}#titleDiv {width: 100%;height: 40px;background-color: bisque;border: 1px red solid;color: cadetblue;}.containerDiv {width: 100%;height: 360px;background-color: gray;border: 1px red solid;color: cadetblue;}
</style><body><div id="mainDiv" style="left: 10px;top:10px;"><div id="titleDiv" onmousedown="clickTitle()" onmousemove="move()" onmouseup="mouseUp()">标题栏</div><div class="containerDiv"></div></div><script>let obj = null;let mouseX;//鼠标点击的位置距离div左边缘的位置let mouseY;function clickTitle() {obj = document.getElementById("mainDiv");document.getElementById("titleDiv").style.cursor = "move";mouseX = event.x - parseInt(obj.style.left);mouseY = event.y - parseInt(obj.style.top);console.log(mouseX);}function mouseUp() {obj = null;document.getElementById("titleDiv").style.cursor = "default";}function move() {if (obj == null) {return;}console.log(mouseX + "," + mouseY);let x = event.x - mouseX;let y = event.y - mouseY;obj.style.left = x + "px";obj.style.top = y + "px";}</script>
</body>
</html>

5 Cookie的使用

Cookie:是一段小文本，该文本大小不超过255字节，他是存储在客户端浏览器

cookie的存活周期由开发人员设置，默认存活周期为session周期

5.1 向浏览器中存储cookie

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title></title>
</head>
<body><button onclick="addCookie()">添加Cookie</button><button onclick="readCookie()">读取Cookie信息</button><button onclick="delCookie()">删除cookie</button><script>/* 向cookie中添加数据*/function addCookie() {//当前时间let nowTime = new Date();let seconds = nowTime.getTime();nowTime.setTime(seconds + (1000 * 60 * 60 * 24 * 7));//expires:设置cookie存活期document.cookie = "username=admin;expires=" + nowTime.toGMTString();}/* 读取cookie*/function readCookie() {//读取cookie中的数据，返回该域所有的cookie字符串let cookieStr = document.cookie;console.log(cookieStr);/ 由于获得的cookie字符串的格式为:key=value;key=value;key=value* 在使用时需要从所有的cookie获得key和value* 使用字符串分割对cookie进行拆分*/let cookieArr = cookieStr.split(";");for (let cookie of cookieArr) {console.log("|" + cookie + "|")//使用=分割字符串的key与valuecookie = cookie.trim();console.log("|" + cookie + "|")let cookieStrArr = cookie.split("=");let key = cookieStrArr[0];let val = cookieStrArr[1];console.log(key);console.log(val);}}/* 删除Cookie中的数据* cookie是不能删除的，存活期到了后自动消失* 删除key为username的cookie* 当将cookie的存活期设置为0或-1时，存活期为session*/function delCookie() {let cookiesStr = document.cookie;let cookiesArr = cookiesStr.split(";");for (let cookie of cookiesArr) {let cookieArr = cookie.trim().split("=");let key = cookieArr[0];if (key == "username") {document.cookie = key + "=" + cookieArr[1] + ";expires=" + new Date().toGMTString();break;}}}</script>
</body></html>

5.2 使用Cookie实现登录效果

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h2>用户登录</h2><input type="text" name="username" id="username" /><br /><input type="password" name="password" id="password" /><br /><button onclick="login()">登录</button><script>let users = [{"username":"admin","password":"123456"},];function login(){let username = document.getElementById("username").value;let password = document.getElementById("password").value;let isLogin = false;for(let user of users){if(username == user.username && password==user.password){document.cookie="username="+username;isLogin = true;break;}}if(isLogin){//页面跳转location.href="index.html";}else{alert("您输入的用户名或密码错误，请重新输入");}}</script></body>
</html>

5.3 使用JSON添加注册

JSON：JavaScript Object Notation，指JavaScript的本地对象，是一种轻量级的数据交换格式。

json就是键值对

json对象:键名可以不加双引号

 {"key1":"value1", "key2":"value2"...}

JSON数组:

[{"key1":"value1", "key2":"value2"...}, {"key1":"value1", "key2":"value3"...}...]

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><h2>用户登录</h2><input type="text" name="username" id="username" /><br /><input type="password" name="password" id="password" /><br /><button onclick="login()">登录</button><hr /><h2>用户注册</h2><form name="regForm"><input type="text" name="username" id="username" /><br /><input type="password" name="password" id="password" /><br /><button type="button" onclick="reigster()">注册</button></form><script>//数组let users = [{"username":"admin","password":"123456"},{"username":"test","password":"test"}];function login(){let username = document.getElementById("username").value;let password = document.getElementById("password").value;let isLogin = false;for(let user of users){if(username == user.username && password==user.password){document.cookie="username="+username;isLogin = true;break;}}if(isLogin){//页面跳转location.href="index.html";}else{alert("您输入的用户名或密码错误，请重新输入");}}/* 用户注册*/function reigster(){let username = document.regForm.username.value;let password = document.regForm.password.value;users.push({"username":username,"password":password});console.log(users);alert("注册成功");}</script></body>
</html>

6 表单验证技术

表单验证指在客户端中对用户输入的数据进行有效性(合法性)检测;检测不通过不让提交给服务端;检测通过后才让数据提交给服务端以这种方式来降低服务端的压力,并避免错误出现

  • 有效性主要指:

    1. 是否为空(必填项)
    2. 格式检测
    3. 自定义内容检测(长度，非法字符检测,多次输入一致性检测)

  • form表单中有一个onsubmit事件

​ 该事件为表单提交事件，当单击提交按钮(submit)时会执行该事件

​ onsubmit事件的返回值决定acion是否被执行,当onsubmit事件的返回true时，执行action

​ 当onsubmit事件的返回false时，不执行action

6.1 正则表达式

  1. 元字符

元字符：即为有特定含义的字符，常见的元字符如下

常用的元字符

代码 说明
. 匹配除换行符以外的任意字符
\\w 匹配字母或数字或下划线或汉字
\\s 匹配任意的空白符
\\d 匹配数字
\\b 匹配单词的开始或结束
^ 匹配字符串的开始（在集合字符里[^a]表示非（不匹配）的意思
$ 匹配字符串的结束
  1. 反义字符

反义字符：多用于查找除某个字符以外其他任意字符均可以的情况

常用的反义字符

代码/语法 说明
\\W 匹配任意不是字母，数字，下划线，汉字的字符
\\S 匹配任意不是空白符的字符
\\D 匹配任意非数字的字符
\\B 匹配不是单词开头或结束的位置
[^x] 匹配除了x以外的任意字符
[^aeiou] 匹配除了aeiou这几个字母以外的任意字符
  1. 限定字符

限定字符多用于重复匹配次数

限定字符

代码/语法 说明
* 重复零次或更多次
+ 重复一次或更多次
? 重复零次或一次
{n} 重复n次
{n,} 重复n次或更多次
{n,m} 重复n到m次
  1. 懒惰匹配和贪婪匹配

贪婪匹配：正则表达式中包含重复的限定符时，通常的行为是匹配尽可能多的字符。

懒惰匹配，有时候需要匹配尽可能少的字符。

懒惰匹配

代码/语法 说明
*? 重复任意次，但尽可能少重复
+? 重复1次或更多次，但尽可能少重复
?? 重复0次或1次，但尽可能少重复
{n,m}? 重复n到m次，但尽可能少重复
{n,}? 重复n次以上，但尽可能少重复

6.2 基于编程式表单验证(基本不用)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>table {width: 400px;height: 300px;border-collapse: collapse;}table,td {border: 1px solid black;}
</style><body><h2 align="center">用户注册</h2><!--form表单中有一个onsubmit事件该事件为表单提交事件，当单击提交按钮(submit)时会执行该事件onsubmit事件的返回值决定acion是否被执行,当onsubmit事件的返回true时，执行action当onsubmit事件的返回false时，不执行action--><form action="注册成功.html" onsubmit="return checkForm()" name="regForm" method="post"><table align="center"><tr><td>用户名:</td><td><input type="text" name="username" /></td></tr><tr><td>密码:</td><td><input type="password" name="password" /></td></tr><tr><td>确认密码:</td><td><input type="password" name="password1" /></td></tr><tr><td>性别:</td><td><input type="radio" checked="checked" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</td></tr><tr><td>E-mail:</td><td><input type="text" name="email" /></td></tr><tr><td>手机号:</td><td><input type="text" name="phone" /></td></tr><tr><td colspan="2"><button>注册</button><button type="reset">重置</button></td></tr></table></form><script>/表单验证 */function checkForm() {//获得页面输入的值let username = regForm.username.value;//非空验证if (username == "") {alert("用户名不能为空!");return false;}//验证username的长度，长度要求在6-18位if (username.length < 3 || username.length > 18) {alert("用户名长度只能在3-18位之间!");return false;}//用户名只能由"数字、字母、下划线"三部分组成if (!checkUsername(username)) {alert("用户名只能为数字、字母、下划线");return false;}//检测密码let password = regForm.password.value;//非空验证if (password == "") {alert("密码不能为空!");return false;}if (password.length < 6 || password.length > 18) {alert("密码长度不符");return false;}let password1 = regForm.password1.value;if (password != password1) {alert("两次密码输入不一致！");return false;}//检测密码let email = regForm.email.value;//非空验证if (email == "") {alert("E-mail不能为空!");return false;}if (!checkEmail(email)) {alert("E-mail不合法");return false;}//检测手机号let phone = regForm.phone.value;//非空验证if (phone == "") {alert("手机号不能为空!");return false;}//判断字符串是否为数字if (isNaN(phone)) {alert("请输入合法的手机号!");return false;}if (phone.indexOf(".") != -1) {alert("请输入合法的手机号!");return false;}if (phone.length != 11) {alert("请输入合法的手机号!");return false;}if (phone.charAt(0) != 1 || phone.charAt(1) == 0 || phone.charAt(1) == 1 || phone.charAt(1) == 2) {alert("请输入合法的手机号!");return false;}return true;}function test() {alert(isNaN('1231.32'));}/* 检测用户名函数,用户名只能由"数字、字母、下划线"三部分组成*/function checkUsername(username) {//遍历username字符串，获得每个字符，进行判断for (let c of username) {if (!((c >= 0 && c <= 9) ||(c >= 'a' && c <= 'z') ||(c >= 'A' && c <= 'Z') ||c == '_')) {return false;//非法字符}}return true;}/* 验证E-mail的格式* 	xxxx@xxx.com|xxx@xxx.cn|xxx@xxx.com.cn*/function checkEmail(email) {//获得@的下标let index1 = email.indexOf("@");//获得点的下标let index2 = email.indexOf(".");//检测是否存在@和.两个符号if (index1 == -1 || index2 == -1) {return false;}//判断@和.的位置if (index2 - index1 <= 1) {return false;}//检测@是否在第一个位置，.是否在最后一个位置if (index1 == 0 || index2 == email.length - 1) {return false;}return true;}</script>
</body></html>

6.3 基于正则表达式的表单验证

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><h2 align="center">用户注册</h2><!--form表单中有一个onsubmit事件该事件为表单提交事件，当单击提交按钮(submit)时会执行该事件onsubmit事件的返回值决定acion是否被执行,当onsubmit事件的返回true时，执行action当onsubmit事件的返回false时，不执行action--><form action="注册成功.html" onsubmit="return checkForm()" name="regForm" method="post"><table align="center"><tr><td>用户名:</td><td><input type="text" name="username" /></td></tr><tr><td>密码:</td><td><input type="password" name="password" /></td></tr><tr><td>确认密码:</td><td><input type="password" name="password1" /></td></tr><tr><td>性别:</td><td><input type="radio" checked="checked" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</td></tr><tr><td>E-mail:</td><td><input type="text" name="email" /></td></tr><tr><td>手机号:</td><td><input type="text" name="phone" /></td></tr><tr><td colspan="2"><button>注册</button><button type="reset">重置</button></td></tr></table></form><script>/表单验证 */function checkForm() {//获得页面输入的值let username = regForm.username.value;//非空验证if (username == "") {alert("用户名不能为空!");return false;}let usernameReg = /^\\w{3,18}$/;//用户名只能由"数字、字母、下划线"三部分组成if (!usernameReg.test(username)) {alert("用户名只能为数字、字母、下划线");return false;}//检测密码let password = regForm.password.value;//非空验证if (password == "") {alert("密码不能为空!");return false;}if (password.length < 6 || password.length > 18) {alert("密码长度不符");return false;}let password1 = regForm.password1.value;if (password != password1) {alert("两次密码输入不一致！");return false;}//检测密码let email = regForm.email.value;//非空验证if (email == "") {alert("E-mail不能为空!");return false;}let emailReg = /^\\w+@\\w+\\.\\w+$/;//数字，字母，下划线+@+数字字母下划线+.+数字字母下划线if (!emailReg.test(email)) {alert("E-mail不合法");return false;}//检测手机号let phone = regForm.phone.value;//非空验证if (phone == "") {alert("手机号不能为空!");return false;}let phoneReg = /^1[3-9]\\d{9}$/;if (!phoneReg.test(phone)) {alert("请输入合法的手机号!");return false;}return true;}function test() {alert(isNaN('1231.32'));}/* 检测用户名函数,用户名只能由"数字、字母、下划线"三部分组成*/function checkUsername(username) {//遍历username字符串，获得每个字符，进行判断for (let c of username) {if (!((c >= 0 && c <= 9) ||(c >= 'a' && c <= 'z') ||(c >= 'A' && c <= 'Z') ||c == '_')) {return false;//非法字符}}return true;}/* 验证E-mail的格式* 	xxxx@xxx.com|xxx@xxx.cn|xxx@xxx.com.cn*/function checkEmail(email) {//获得@的下标let index1 = email.indexOf("@");//获得点的下标let index2 = email.indexOf(".");//检测是否存在@和.两个符号if (index1 == -1 || index2 == -1) {return false;}//判断@和.的位置if (index2 - index1 <= 1) {return false;}//检测@是否在第一个位置，.是否在最后一个位置if (index1 == 0 || index2 == email.length - 1) {return false;}return true;}</script>
</body></html>

6.4 及时校验

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>table {width: 600px;height: 300px;border-collapse: collapse;}table,td {border: 1px solid black;}
</style><body><h2 align="center">用户注册</h2><!--form表单中有一个onsubmit事件该事件为表单提交事件，当单击提交按钮(submit)时会执行该事件onsubmit事件的返回值决定acion是否被执行,当onsubmit事件的返回true时，执行action当onsubmit事件的返回false时，不执行action--><form action="注册成功.html" onsubmit="return checkForm()" name="regForm" method="post"><table align="center"><tr><td>用户名:</td><td><!--onfocus:获得焦点事件onblur:失去焦点事件--><input type="text" name="username" onblur="checkUsername()" /></td></tr><tr><td>密码:</td><td><input type="password" name="password" onkeyup="passwordSecurity(this)" onblur="checkPassword()" /></td></tr><tr><td>确认密码:</td><td><input type="password" name="password1" onblur="checkPassword1()" /></td></tr><tr><td>性别:</td><td><input type="radio" checked="checked" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女</td></tr><tr><td>E-mail:</td><td><input type="text" name="email" onblur="checkEmail()" /></td></tr><tr><td>手机号:</td><td><input type="text" name="phone" onblur="checkPhone()" /></td></tr><tr><td colspan="2"><button>注册</button><button type="reset">重置</button></td></tr></table></form><button onclick="test()">测试</button><script type="text/javascript">function passwordSecurity(element) {let value = element.value;let marker1 = 0;let marker2 = 0;let marker3 = 0;for (let c of value) {if (c >= 'a' && c <= 'z' || (c >= 'A' && c <= 'Z')) {marker1 = 1;} else if (c >= '0' && c <= '9') {marker2 = 1;} else {marker3 = 1;}}let msg = "";if (marker1 + marker2 + marker3 == 1) {msg = "弱";} else if (marker1 + marker2 + marker3 == 2) {msg = "中";} else if (marker1 + marker2 + marker3 == 3) {msg = "强";}showInfo(element, msg, 1);}/* 显示错误消息* element   事件源* msg		错误消息* type		类型(1,正确，-1错误)*/function showInfo(element, msg, type) {//创建一个HTML标签对象let spanEle = document.createElement("span");//获得事件源的父元素let parentEle = element.parentNode;//获得最后一个子元素let lastEle = parentEle.lastElementChild;//判断子元素是否为span标签if (lastEle.nodeName == "SPAN") {//移除子元素parentEle.removeChild(lastEle);}spanEle.style.color = "green";//根据类型设置不同的文本颜色if (type == -1) {spanEle.style.color = "red";}//设置错误消息spanEle.innerHTML = msg;//设置spanEle的显示位置//向父元素对象中添加一个子元素parentEle.appendChild(spanEle);}function checkUsername() {//获得当前元素对象let element = regForm.username;//获得页面输入的值let username = element.value;let msg = "";let usernameReg = /^\\w{3,18}$/;//非空验证if (username == "") {msg = "用户名不能为空!";} else if (!usernameReg.test(username)) {msg = "用户名只能为数字、字母、下划线!";}if (msg != "") {//没有错误showInfo(element, msg, -1);return false;}//没有错误showInfo(element, "ok", 1);return true;}/* 校验密码*/function checkPassword() {let element = regForm.password;//检测密码let password = element.value;let msg = "";//非空验证if (password == "") {msg = "密码不能为空!";} else if (password.length < 6 || password.length > 18) {msg = "密码长度不符";}if (msg != "") {//没有错误showInfo(element, msg, -1);return false;}//没有错误showInfo(element, "ok", 1);return true;}function checkPassword1() {let element = regForm.password1;//检测密码let password = regForm.password.value;let password1 = element.value;let msg = "";if (password != password1) {msg = "两次密码输入不一致！";}if (msg != "") {//没有错误showInfo(element, msg, -1);return false;}//没有错误showInfo(element, "ok", 1);return true;}function checkEmail() {let element = regForm.email;//检测密码let email = element.value;let msg = "";let emailReg = /^\\w+@\\w+\\.\\w+$/;//非空验证if (email == "") {msg = "E-mail不能为空!";} else if (!emailReg.test(email)) {msg = "E-mail不合法";}if (msg != "") {//没有错误showInfo(element, msg, -1);return false;}//没有错误showInfo(element, "ok", 1);return true;}function checkPhone() {let element = regForm.phone;//检测手机号let phone = element.value;let msg = "";let phoneReg = /^1[3-9]\\d{9}$/;//非空验证if (phone == "") {msg = "手机号不能为空!";} else if (!phoneReg.test(phone)) {msg = "请输入合法的手机号!";}if (msg != "") {//没有错误showInfo(element, msg, -1);return false;}//没有错误showInfo(element, "ok", 1);return true;}/表单验证 */function checkForm() {if (checkUsername() && checkPassword() && checkPassword1() && checkEmail() && checkPhone()) {return true;}return false}function test() {alert(isNaN('1231.32'));}</script>
</body></html>

PS:

typeof(variable) :检测变量的类型

ESESMAScrpit是JavaScrpit的编译器

  • 学习来自于西安加中实训
网络标签：

相关问题