<!DOCTYPE html>
<html lang="zh-CN">
<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>表单验证</title>
</head>
<body>
</body>
<script>
// 表单验证
/* 表单验证的思路
1.获取到用户输入的内容
2.注册、登录、向后台提交数据之前(发送请求之前),要去验证输入内容的有效性(合法性)
2.1通过js的知识点、数组、字符串相关的知识点
2.2正则表达式
3.合法:把数据提交给后台,不合法:给予用户提示
*/
// 常用表达式
// [a - z]查找任何从小写a到小写z的字符 - 表示区间[a - d]
// [A - Z]查找任何从大写A到大写Z的字符
// Ⅰ[0 - 9]查找任何从日至9的数字
// [sdf]查找括号内的任意一个字符
// [^ abc]查找除了括号内的任意字符
/*
正则表达式(RegExp(regular expression))的使用方式:
1.构造函数
new RegExp(正则表达式主体,修饰符)
// 2.字面量形式
var reg2 = /正则表达式主题/修饰符;
正则表达式主体:
是我们要重点学习的,js原生提供了很多的子表达式,元字符,两次等来帮助你完成正则表达式
表达式 描述
[a-z] 查找任何从小写a到小写z的字符 -区间 /abc/:匹配abc /[a-c]/:匹配任意a-c
[A-Z] 查找任何从大写A到大写Z的字符
[0-9] 查找任何从0-9的数字
[abc] 查找括号内的任意一个字符
[^abc] 查找除了括号内的任意字符
元字符
\w 匹配数字、字母、下划线
\W 匹配非数字、字母、下划线 等同于 [^A-Za-z0-9]
\d 匹配数字
\D 匹配非数字
\s 匹配空白字符(空格、换行)
\S 匹配非空白字符
\n 匹配换行符
限定符(量词)
* 匹配前面的子表达式零次或多次
+ 匹配前面的子表达式一次或多次 + == {1,}
? 匹配前面的子表达时零次或一次
{n,} , {2} 匹配确定的n次
{n,} {10,} 最少匹配n次
{n,m} {5,12} 最少匹配n次且最多匹配m次
^ 以某某开头
$ 以某某结尾
\ 转义字符,有些特殊字符在正则中已经有了自己的含义,但是我们又想匹配它自身就要加\
|
regular expression方法:
1.test()
2.exec()
修饰符:
用来修饰你的正则表达式,
g:执行全局匹配
var str= 'sdfksd45dif2';
我们要匹配数字,全局匹配就是会把整个str字符串匹配一遍,如果不全局匹配,那就匹配到就停止了
i:对大小写不敏感(不区分大小写)
reg.text(str);要来检测str是否符合正则的要求,符合就返回true,否则返回false
var str = 'sdsdfasdfasdfasdf';
var reg = new RegExp('[a-z]');//匹配字母
// var reg = /[a-z]/i; //匹配小写字母
console.log(reg.test(str))
var str = 'sdfasdf';
var reg = /\d/; //匹配数字
// var reg = /[a-z\d]/; //匹配小写字母和数字
// var reg = /[a-z\d]/i;
console.log(reg.test(str));
// 要求匹配: 数字开头,字母结尾,长度6-12的字母数字下划线
str = '4farrasdf234'
var reg = /^\w{6,12}[a-z]$/i;
console.log(str.length, reg.test(str));
*/
// 要求匹配: 数字开头,字母结尾,长度6-12的数字
str = 'd53348d'
var reg = /^\d\w{5,12}[0-9]+[a-z]+$/;
console.log(str.length, reg.test(str));
// 属性 lastIndex
// 属性:记录全局匹配时匹配到的位置
var str = 'asdflasdkfjlsdf'
var re = /a/gi
// console.log(re.test(str))
console.log(re.exec(str))
console.log(re.exec(str))
// 属性 lastIndex
re.lastIndex = 0;
console.log(re.exec(str))
console.log(re.exec(str))
</script>
</html>