JavaScript+CSS+html【练习题】JS正则表达式验证表单
程序员文章站
2022-07-13 13:47:33
...
JavaScript+CSS+html【练习题】JS正则表达式验证表单
题目
程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图。
需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示)。
使用 HTML+CSS 布局出如上图所示页面效果；
嵌入 JS 代码，添加表单提交和表单项失去焦点等事件处理；
在事件处理中按照表单项后面提示的信息完成对应表单验证操作。
注意：单选和下拉框无须添加失去焦点事件（因为只有输入框需要）。
JS正则表达式
使用正则的3种方式
- 向String对象的方法（search,match,replace,split）传入参数：/正则表达式/。
- 先new一个正则表达式对象RegExp，再将其传入String对象的方法（search,match,replace,split）。
- 先new一个正则表达式对象RegExp，使用RegExp自身的方法。
//正则的使用
var str = "wert45678yuiytrew";
//使用正则匹配子串str中的数字
console.log(str.match(/[0-9]+/));
//使用RegExp创建一个正则对象
var pat = new RegExp("[0-9]+");
console.log(str.match(pat));
console.log(pat.exec(str));
//以上三个返回结果一致：["45678", index: 4, input: "wert45678yuiytrew", groups: undefined]
修饰符
方括号
方括号用于查找某个范围内的字符：
元字符
元字符（Metacharacter）是拥有特殊含义的字符：
\w :匹配单词字符，等价于 [a-zA-Z0-9_] 共63个字符（字母数字下划线）。
量词
RegExp 对象属性
RegExp 对象方法
支持正则表达式的 String 对象的方法
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人信息登记表</title>
<style>
#board{
width: 700px;
height: 500px;
border: 1px solid blueviolet;
background-color:lightblue;
overflow: hidden;
position: relative;
}
form{
position: absolute;
left:50px;
bottom: 30px;
}
h1{
position: absolute;
left:50px;
top:0px;
}
#require{
width: 300px;
height: 500px;
position: absolute;
top:80px;
right:70px;
font-size: small;
color: grey;
line-height: 31px;
}
</style>
</head>
<body>
<div id="board">
<h1>个人信息登记表</h1>
<form action="submit_success.html" name="myform" onsubmit="return doSubmit()" method="post">
登录账号：<input type="text" name="username" onblur="checkUserName()"><br/><br/>
登录密码：<input type="text" name="psw1" onblur="checkPSW1()"><br/><br/>
重复密码：<input type="text" name="psw2" onblur="checkPSW2()"><br/><br/>
性  别：
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女" checked>女<br/><br/>
年  龄：<input type="text" name="age" onblur="checkAge()"><br/><br/>
手机号码：<input type="text" name="phone" onblur="checkPhone()"><br/><br/>
邮  箱：<input type="text" name="email" onblur="checkEmail()"><br/><br/>
学  历：
<select name="education">
<option value="初中">初中</option>
<option value="高中">高中</option>
<option value="大专">大专</option>
<option value="本科" selected>本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select><br/><br/>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<div id="require">
<p>6~18位有效字符（字母、数字、下划线）</p>
<p>6~18位任意字符</p>
<p>重复密码与登录密码一致</p>
<p>必须选择一个</p>
<p>大于0的任意两位整数</p>
<p>由1开头的11位整数</p>
<p>有效的Email地址</p>
<p>必须选择一个学历选项</p>
</div>
</div>
</body>
<Script>
function checkUserName(){
//6~18位有效字符（字母、数字、下划线）
var username=document.myform.username.value;
if(username.match(/^\w{6,18}$/)==null){
alert("请输入：6~18位有效字符（字母、数字、下划线）");
return false;
}
return true;
}
function checkPSW1(){
//6~18位任意字符
var psw1=document.myform.psw1.value;
if(psw1.length<6||psw1.length>18){
alert("请输入：6~18位任意字符");
return false;
}
return true;
}
function checkPSW2(){
//6~18位任意字符
//与之前输入的密码一致
var psw1=document.myform.psw1.value;
var psw2=document.myform.psw2.value;
if(psw1==""){
alert("请先在“登录密码”框处进行输入");
return false;
}else if(psw1==psw2){
return true;
}else{
alert("前后两次输入密码不一致，请重新输入");
return false;
}
if(psw2.length<6||psw2.length>18){
alert("请输入：6~18位任意字符");
return false;
}
}
function checkAge(){
//大于0的任意两位整数
var age=document.myform.age.value;
if(age.match(/^[0-9]{2}$/)==null||age=="00"){
alert("请输入：大于0的任意两位整数");
return false;
}
return true;
}
function checkPhone(){
//由1开头的11位整数
var phone=document.myform.phone.value;
if(phone.match(/^[0-9]{11}$/)!=null&&phone[0]=="1"){
return true;
}
alert("请输入：由1开头的11位整数");
return false;
}
function checkEmail(){
//有效的Email地址
//以数字字母开头，中间可以是多个数字字母下划线或者-
//然后是@，后面是数字字母
//然后是.加2-4个字母结尾
var email=document.myform.email.value;
if(email.match(/^([a-zA-Z]|[0-9])(\w|\-)aaa@qq.com[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/)==null){
alert("请输入：有效的Email地址");
return false;
}
return true;
}
function doSubmit(){
return checkUserName()&&checkPSW1()&&checkPSW2()&&checkAge()&&checkPhone()&&checkEmail();
}
</Script>
</html>
效果展示
上一篇： 求逆元的几种办法