本文探讨了在ES6中如何利用正则表达式进行表单验证，包括焦点验证，介绍了正则的相关方法如test()和exec()，以及字符串的search()和match()。还讲解了let的基本用法，强调了块级作用域、暂时性死区和不存在变量提升的特点。此外，文章提到了this的使用场景和bind方法，以及JSON.parse和JSON.stringify的用法。最后，对比了for...in...和for...of...的区别。
表单验证
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
//action提交的位置 method提交的方式
<form action="ok.html" method="get" id="myForm">
姓名:<input type="text" name="username" id="name"/></br>
密码:<input type="password" name="pwd" id="pwd"/></br>
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
<script>
var myForm = document.getElementById("myForm");
//表单提交的事件 该方法返回值为boolen类型 true为提交 false为不提交
myForm.onsubmit = function(){
//验证每一个表单项是否满足正则 只要有一个不满足 直接返回false
//验证用户名
var name = document.getElementById("name");
var pwd = document.getElementById("pwd");
var regName = /^dahuang$/;
var strName = name.value;
if(!regName.test(strName)){
alert("用户名不合法");
return false;
}
//验证密码
var regPwd = /^123666$/;
var strPwd = pwd.value;
if(!regPwd.test(strPwd)){
alert("密码不合法");
return false;
}
return true;
}
</script>
表单验证强化版：焦点验证
通常一个表单内容特别多，如果每次全部填写完成之后才能表单验证，这样对用户的体验特别不好
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="_form" action="ok.html">
<input type="text" id="_name"/></br>
<input type="password" id="_pwd"/></br>
<input type="submit"></br>
</form>
</body>
</html>
<script>
var userName = document.getElementById("_name");
var userPwd = document.getElementById("_pwd");
var userform = document.getElementById("_form");
var flagName = null;
var flagPwd = null;
userName.onblur = function(){
var str = this.value;
var regName = /^dahuang$/;
if(regName.test(str)){
flagName = true;
}else{
alert("姓名不合法");
flagName = false;
}
}
userPwd.onblur = function(){
var str = this.value;
var regPwd = /^123666$/;
if(regPwd.test(str)){
flagPwd = true;
}else{
alert("密码不合法");
flagPwd = false;
}
}
userform.onsubmit = function(){
if(flagName && flagPwd){
return true;
}else{
return false;
}
}
</script>
正则中的相关方法及属性
正则中的相关方法:
test() 检验一个字符串是否符合某一个正则规则，如果符合返回true，否则返回false
用法：reg.test(str);
exec：根据正则表达式查找，结果满足，会返回一个长度为1的数组（数组只有一个值）
用法：reg.exec(str)
var reg = /\d;// /\d/g/;
var str = "123456789";
// var arr = reg.exec(str);
console.log(reg.exec(str)[0]);
console.log(reg.exec(str)[0]);
console.log(reg.exec(str)[0]);
console.log(reg.exec(str)[0])
lastIndex ：这个属性记录的就是下一次捕获从哪个索引开始。
var reg = /\d/g;
var str = "92a345a678a9";
console.log(reg.exec(str));
console.log(reg.lastIndex);
console.log(reg.exec(str));
console.log(reg.lastIndex);
console.log(reg.exec(str));
console.log(reg.lastIndex);
console.log(reg.exec(str));
console.log(reg.lastIndex);
g---------------全局
i---------------忽略字母大小写
正则中相关字符串的方法
search()方法 返回与正则表达式查找内容匹配的第一个字符串的位置
用法：str.search(reg);
说明：如果找到则返回子字符至开始处的偏移位，否则返回-1.
var r,re; //声明变量。
var s = "The rain in Spain falls mainly in the plain.";
re = /falls/i; //创建正则表达式模式
re2 = /tom/i;
r = s.search(re); //查找字符串
r2 = s.search(re2);
document.write("r:" + r + ";r2:" +r2); //返回Boolean结果
match 方法
使用正则表达式模式对字符串执行查找，并将包含查找的结果作为数组返回。
str.match(rgExp)
var reg = /\d+/g;
var str = "123a435a987";
console.log(str.match(reg));
replace方法
返回根据正则表达式进行文字替换后的字符串的复制。
stringObj.replace(rgExp,replaceText)
var reg = /laowang/g;
var str = "laowang的隔壁也住着laowang";
console.log(str.replace(reg,"dahuang"));
ES6
- let语法
let是什么？
let用来声明变量，它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效，类似于C，C++，JAVA局部变量的概念。 - 基本用法
a.块及作用域
{
var a = 10;
let b = 123;
}
console.log(a);
console.log(b);
上面代码在代码块之中，分别用let 和 var 声明了两个变量。然后再代码块之外调用这两个变量，结果let声明的变量无法被打印，var声明的变量返回正确的值。这表明，let声明的变量只在它所在的代码块有效。
for(let i=0; i<10; i++){
document.write(i);
}
document.write(i)；//x 看不到
上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。
b. 暂时性死区
下面代码在有两个同名变量a，但是却由于{}使得作用域不同，输出结果为123,456
在被let修饰的同名变量下，根据就近原则，内部变量屏蔽外部变量。
let a = 456;
{
let a = 123;
console.log(a);
}
console.log(a);
c.不存在变量提升
var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为underfined。这种现象多多少少是有些奇怪的，按照一般的逻辑，变量应该在声明语句之后才可以使用。
//var的情况
console.log(foo); //输出undefined
var foo = 2;
//let的情况
console.log(bar) ; // 报错ReferenceError
let bar = 2;
也就意味着被let声明的变量，必须先定义在使用。
d.不允许重复声明
var a = 123;
var a = 123; // 可以实现
let b = 123;
let b = 123; // Identifier 'a' has already been declared
this 与 bind
this
a:当this出现在普通方法时，this代表调用当前方法的对象本身。
b:当this出现在事件中时，this代表调用当前事件的HTML元素本身
常规函数
function fun(){
console.log(this);
}
fun();
匿名函数：
setTimeout(function{
console.log(this);
},2000)
事件
document.onclick = function(){
console.log(this);
}
bind(this重新指代的对象）：只能为匿名函数服务
#box{
width: 100px;
height: 100px;
background: #FF0000;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
var box = document.getElementById("box");
document.onclick = function(){
this.style.display = "none";
}.bind(box);
有名函数重新指定this对象：apply call
function fun(){
console.log(this);
};
//fun.apply(box);
//fun.call(box);
fun();
JSON.parse/JSON.stringify
JSON字符串和对象直接的转换
var str = '{"id":"123","name":"大黄"}';
var obj = JSON.parse(str);
document.write(obj.id+""+obj.name);
var obj = {"id":"123","name":"大黄"};
var str1 = JSON.stringify(obj);
document.write(str);
const用法
什么是const命令呢？实际上它也是一种声明常量的方式
const命令用来声明变量，一旦声明，其值就不能改变。也就是只读变量
const a = 10;
a = 100;//Assignment to constant variable 报错
基本用法:
a.声明常量
const PI = 3.1415;
PI // 3.1415
PI = 3;
// TypeError: Assignment to constant variable.
b.常量必须初始化
const foo；//报错 Missing initializer in const declaration
c.块级作用域
{
const foo = 123;
}
console.log(foo);
上述代码依然报错，和let的效果是一样的。
d.声明不提升(const修饰的变量必须先定义后使用)
if (true) {
console.log(MAX); // ReferenceError
const MAX = 5;
}
e.const修饰的变量不可重复定义
简单来说，let和const的功能基本类似，只是let用来修饰变量,const用来修饰常量。
无论是let还是const,这并不算新的语法，其实这些内容甚至是其他高级语言"玩剩下的",这种改动只是将JS脚本语言更加标准化了，
可见js的语法也更加的后台化。
for…in…和for…of…
let strArr = ["heihei","haha","laowang"];
for(let index in strArr){ //遍历下标
console.log(strArr[index]);
}
for(let t of strArr){ //便利值
console.log(t);
}
扫一扫
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
