<!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>
<style>
.box{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 500px;
height: 400px;
}
.box input{
width: 100%;
}
button{
width: 100px;
height: 35px;
}
</style>
</head>
<body>
<div class="box">
<input class="ipt" type="text" placeholder="请输入用户名:">
<input class="ipt" type="text" placeholder="请输入手机号:">
<input class="ipt" type="text" placeholder="请输入年龄:">
<input class="ipt" type="text" placeholder="请输入密码:">
<input class="ipt" type="text" placeholder="请输入身份证:">
<input class="ipt" type="text" placeholder="请输入有效数字:">
<button class="btn">注册</button>
</div>
<script>
let btn=document.getElementsByClassName("btn")[0];
let ipt=document.getElementsByClassName("ipt");
let user=/^([A-Z]{1,}|[a-z]{1,}|\d{1,}){6,}$/,
tel=/^1[35789]\d{9}$/,
age=/^((1[8-9])|([2-5]\d)|(6[0-5]))$/,
selfId=/^\d{17}(\d|X)$/,
pwd=/^(\d|[a-zA-Z]){6,}$/,
ok=/^([+\-]?(([1-9]\d+)|\d)(\.\d+)?)$/;//检测有效数字
//[]内+号不需要转义, -号最好是转义一下
//校验QQ邮箱: (5到11位数,全部是数字);
qqEmail=/^(\d{5}|\d{6}|\d{7}|\d{8}|\d{9}|\d{10}|\d{11})(\@[q][q]\.[c][o][m])$/
btn.onclick=function(){
if(!user.test(ipt[0].value)){
alert("用户名格式不正确");
return;
}
if(!tel.test(ipt[1].value)){
alert("手机格式不正确");
return;
}
if(!age.test(ipt[2].value)){
alert("年龄格式不正确");
return;
}
if(!selfId.test(ipt[4].value)){
alert("身份证格式不正确");
return;
}
if(!pwd.test(ipt[3].value)){
alert("密码格式不正确");
return;
}
if(!ok.test(ipt[5].value)){
alert("密码格式不正确");
return;
}
if(!qqEmail.test(ipt[6].value)){
alert("密码格式不正确");
return;
}
(function(){
alert('欢迎!');
})()
}
</script>
</body>
</html>
正则的一个校验小demo
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
上一篇:ES6的解构赋值学习
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
一个vue小demo代码介绍
上篇文章说道,前段时间忙里偷闲,试了一下vue,搞了个小demo作为练习。原本以为很简
vue vue + layUI layui-layer vue路由 vue模板页 -
动态获取查询条件的一个小Demo
前言纸上得来终觉浅
小程序 java linux mysql c++ -
关于Sqlite的一个demo
直接
sqlite sql sql语句 -
drools 的一个小demo
直接上代码: 第一步,maven引入相关包 第二步,编写一个规则文件: 第三步:测试代码 然后看见规则文件生效了....
drools spring maven java xml