JavaScript正则基础+表单验证
①概念:正则表达式是一种表述字符串结构的语法规则,是一个特定的格式模式。可以匹配、替换、截取匹配的字串
②正则表达式字符串构成
位置元字符
行定位符就是用来描述字符串的边界。
“^” 表示行的开始
//^ 位置元字符 规定了字符串的开头是谁
var pt=/^a/;//要求字符串以a为开头
console.log(pt.test('apple'));
console.log(pt.test('banner'));
“$” 表示行的结束
//$ 位置元字符串 规定了以谁为结尾
var pt1=/p$/;
console.log( pt1.test('app'));
console.log( pt1.test('apple'));
字符串元字符
这些字符用来描述一类或者一组字符
A.[ ] 字符类 一个括号只能匹配一个字符。
//[]一个括号只能匹配一个字符
var pt2=/^[0-9|X]$/;//或者的意思 0-9之间的数字或者是X
console.log( pt2.test("3"));
B.()选择字符
var pt4=/^(apple|banner)$/;
console.log( pt4.test('apple'));
C. - 连字符
var pt2=/^[0-9|X]$/;//或者的意思 0-9之间的数字或者是X
console.log( pt2.test("3"));
var pt3=/^[a-zA-Z]$/;//匹配小写a-z A-Z之间的任意一个字符
console.log( pt3.test('A'));
D.[^]排除字符
//不能以数字开头
var pt5=/^[^0-9]$/;
console.log(pt5.test('A'));
E.(.)任意字符
//任意字符
var pt6=/^.$/;//匹配任意一位字符
console.log(pt6.test(0));
F.()转译字符 eg: {\i (忽略大小写) \表示转义字符,把带有正则表达式意义的字符转义成普通字符}
//转义字符
var pt7=/^\.$/;
console.log(pt7.test('.'));
G.正则表达式中,有些字符本身没有特殊含义,前面加上\ 就具有特殊意义。
\d 任意十进制数[0-9]
var pt8=/^\d\d$/;//\d匹配0-9之间的任意一位字符
console.log( pt8.test('10'));
\D 任意非十进制数[^0-9]
\s 任意空白字符
\S 任意非空白字符
\w 任意单词字符[a-zA-Z0-9_]
var pt9=/^\w$/;//[a-zA-Z_]
console.log( pt9.test(’_’));
\W 任意非单词字符[^z-aA-Z_]
数量元字符(限定类)
对于重复出现的字母或字串,可以使用限定类字符来实现匹配,限定符主要有下面6种。
? 匹配前面一次或0次
var pt1=/^\w?$/;//?匹配0次或1次
console.log(pt1.test('a'));
- 匹配前面一次或多次
var pt2=/^\w+@\w+\.com$/;//+ 匹配一次或多次
console.log( pt2.test("@4.com3432@qq.com"))
- 匹配前面0次或多次
var pt3=/^[0-9]*$/;//匹配0次或多次
console.log( pt3.test("1ewewe"));
{n} 匹配前面n次
{n,} 匹配前面至少n次
{n,m} 匹配前面至少n次最多m次
正则表达式.test()返回true或false 表示是否存在模式
4. 字符集
[0-9] 数字0-9之间任意数字
[a-z] 小写字母集合
[A-Z] 大写字母集合
[0-9a-zA-Z_] 所有非特殊字符集合 不能有特殊字符
相反集合 ^
[^0-9] 非数子
[^a-z] 非小写字母集合
[^A-Z] 非大写字母集合
[^0-9a-zA-Z] 所有特殊字符集合
\d = [0-9]
\D = [^0-9]
\w = [A-Za-z0-9_]
\W = [^A-Za-z0-9_]
综合案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var falg1=true;
var falg2=true;
var falg3=true;
var falg4=true;
var falg5=true;
var falg6=true;
var falg7=true;
//验证用户名是否正确
function fun1(){
var username= document.getElementById("username").value ;
//汉字的正则匹配
var pt=/^[\u4e00-\u9fa5]{2,10}$/;//匹配中文 至少2次
if(pt.test(username)){
document.getElementById("word1").innerText="√";
falg1=true;
}else{
document.getElementById("word1").innerText="用户名输入格式不正确";
falg1=false;
}
}
//验证密码是否正确
function fun2(){
var pwd= document.getElementById("pwd").value;
var pt1=/^\w{6,15}$/;
if( pt1.test(pwd)){
document.getElementById("word2").innerText="√"
falg2=true;
}else{
document.getElementById("word2").innerText="密码格式不正确";
falg2=false;
}
}
function fun3(){
var repwd=document.getElementById("repwd").value;
var pwd=document.getElementById("pwd").value;
if(repwd!=pwd){
document.getElementById("word3").innerText="密码不一致";
falg3=true;
}else{
document.getElementById("word3").innerText="√"
falg3=false;
}
}
function fun4(){
var email= document.getElementById('email').value;
//943243@qq.com
//dhfldshf@163.com
var pt=/^\w{1,}@\w{1,}\.com$/;
if( pt.test(email)){
document.getElementById("word4").innerText="√";
}else{
document.getElementById("word4").innerText="邮箱格式不正确";
}
}
//手机号码格式验证
function fun5(){
var tel= document.getElementById("tel").value;//获取手机号码的值
var pt5=/^1[3|5|7|8][0-9]{9}$/;//书写手机号码的正则
if( pt5.test(tel)){//判断输入的格式是否正确
document.getElementById("word5").innerText="√"
}else{
document.getElementById("word5").innerText="手机号格式不正确";
}
}
//验证用户输入的身份证号码是否正确
function fun6(){
var idcard=document.getElementById("idcard").value; //获取用户输入身份证号码
var pt6=/^[0-9]{17}[0-9|X]$/;//书写身份证号的正则
if( pt6.test(idcard)){//使用正则验证身份证号是否正确
document.getElementById("word6").innerText="√";//将word6的值改为√
}else{
document.getElementById("word6").innerText="身份证号码格式不正确";//将word6的值改为提示信息
}
}
function fun7(){
var code=document.getElementById("code").value;
var pt7=/^[a-zA-Z]{4}$/;
if(pt7.test(code)){
document.getElementById("word7").innerText="√";//将word6的值改为√
}else{
document.getElementById("word7").innerText="验证输入格式不正确";//将word6的值改为√
}
}
function add(){
fun1();fun2(); fun3()
if(falg1 && falg2 && falg3){
console.log("ok");
}else{
return false;
}
}
</script>
</head>
<body>
<form action="index2.html" method="get" onsubmit="return add()">
姓名:<input type="text" id="username" onblur="fun1()"><span id="word1"></span><br>
密码:<input type="password" id="pwd" onblur="fun2()"><span id="word2"></span><br>
确认密码:<input type="password" id="repwd" onblur="fun3()"><span id="word3"></span><br>
邮箱:<input type="email" id="email" onblur="fun4()"><span id="word4"></span><br>
手机号:<input type="tel" id="tel" onblur="fun5()"><span id="word5"></span><br>
身份证号:<input type="text" id="idcard" onblur="fun6()"><span id="word6"></span><br>
验证码:<input type="text" id="code" onblur="fun7()"><span id="word7"></span> ancd<br>
<input type="submit" value="提交"><br>
</form>
</body>
</html>