老师请帮忙检查一下
来源：4-8 编程练习
春萍401599
2020-08-14 09:33:39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式</title>
<style>
*{
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 30px;
background-color: skyblue;
color: #fff;
line-height: 30px;
text-indent: 30px;
}
.box{
background-color: #ececec;
text-align: center;
width: 100%;
height: 1000px;
position: relative;
}
.cf::after{
display: block;
content: "";
clear: both;
}
table{
width: 500px;
position: absolute;
left: 50%;
margin-left: -250px;
top: 30px;
}
input:focus{
outline: none;
border: 1px skyblue solid;
}
tr td:nth-child(1){
text-align: right;
}
tr td:nth-child(1),
tr td:nth-child(2),
tr td:nth-child(3){
padding-bottom: 16px;
}
tr td:nth-child(3){
text-align: left;
font-size: 10px;
width: 150px;
padding-left: 5px;
}
tr td:nth-child(2){
text-align: left;
padding-left: 15px;
width: 100px;
outline-color: skyblue;
}
select{
width: 150px;
}
.test{
color: red;
}
#btn{
position: absolute;
left: 50%;
top: 370px;
width: 50px;
height: 25px;
border: 1px solid skyblue;
border-radius: 5px;
background-color: skyblue;
}
</style>
</head>
<body>
<header >用户注册</header>
<div class="box cf">
<table class="cf">
<tr>
<td >用户名：</td>
<td><input type="text" id="userName" ></td>
<td id="testUserName" class="test" ></td>
</tr>
<tr>
<td>登陆密码：</td>
<td><input type="password" id="password"></td>
<td id="testPassword" class="test" ></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" id="passwordConfire"></td>
<td id="testPasswordConfire" class="test" ></td>
</tr>
<tr>
<td>姓名：</td>
<td><input type="text" id="Name"></td>
<td id="testName" class="test" ></td>
</tr>
<tr>
<td>性别：</td>
<td>
<select name="" id="" class="sex" >
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>身份证号码：</td>
<td><input type="text" id="idCard"></td>
<td id="testIdCard" class="test" ></td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" id="email"></td>
<td id="testEmail" class="test" ></td>
</tr>
<tr>
<td>手机号码：</td>
<td><input type="text" id="tel"></td>
<td id="testTel" class="test" ></td>
</tr>
</table>
<input type="button" value="提交" id="btn">
</div>
<script>
//获取元素
function getById(idName){
return document.getElementById(idName);
}
var getElements={
userName:getById('userName'),
password:getById('password'),
passwordConfire:getById('passwordConfire'),
Name:getById('Name'),
sex:getById('sex'),
idCard:getById('idCard'),
email:getById('email'),
tel:getById('tel'),
btn:getById('btn'),
testUserName:getById('testUserName'),
testPassword:getById('testPassword'),
testPasswordConfire:getById('testPasswordConfire'),
testName:getById('testName'),
testIdCard:getById('testIdCard'),
testEmail:getById('testEmail'),
testTel:getById('testTel'),
tests:document.getElementsByClassName('test')
}
//验证用户名
getElements.userName.onblur=function(){
var pattern= /^[a-zA-Z]\w{5,19}$/i;
if(pattern.test(getElements.userName.value)){
getElements.testUserName.innerHTML='OK';
}else{
getElements.testUserName.innerHTML='6-20位字母、数字或“_”,字母开头';
}
}
//验证密码
getElements.password.onblur=function(){
var pattern=/^[^\s]\.{6,18}$/i;
if(pattern.test(getElements.password.value)){
getElements.testPassword.innerHTML='OK';
}else{
getElements.testPassword.innerHTML='6-18位，包括数字字母或符号，中间不能有空格';
}
}
//验证确认密码
getElements.passwordConfire.onblur=function(){
if(getElements.password.value==getElements.passwordConfire.value&&getElements.password.value!=''){
getElements.testPasswordConfire.innerHTML='OK';
}else{
getElements.testPasswordConfire.innerHTML='两次输入密码不一致';
}
}
//验证姓名
getElements.Name.onblur=function(){
var pattern=/^[\u4e00-\u9fa5]{2,4}$/;
if(pattern.test(getElements.Name.value)){
getElements.testName.innerHTML='OK';
}else{
getElements.testName.innerHTML='真实姓名为两位到四位的中文汉字'
}
}
//验证身份证号
getElements.idCard.onblur=function(){
var pattern=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(pattern.test(getElements.idCard.value)){
getElements.testIdCard.innerHTML='OK';
}else{
getElements.testIdCard.innerHTML='15位或者18位的数字，18位时最后一位可能是x';
}
}
//验证邮箱
getElements.email.onblur=function(){
var pattern=/^[a-z0-9]+(?:[._-][a-z0-9]+)*@[a-z0-9]+(?:[._-][a-z0-9]+)*\.[a-z]{2,4}$/i;
if(pattern.test(getElements.email.value)){
getElements.testEmail.innerHTML='OK';
}else{
getElements.testEmail.innerHTML='邮箱格式不正确';
}
}
//验证电话号码
getElements.tel.onblur=function(){
var pattern=/^1[358]\d{9}$/;
if(pattern.test(getElements.tel.value)){
getElements.testTel.innerHTML='OK';
}else{
getElements.testTel.innerHTML='电话号码错误';
}
}
getElements.btn.onclick=function(){
getElements.userName.onblur;
getElements.password.onblur;
getElements.passwordConfire.onblur;
getElements.Name.onblur;
getElements.idCard.onblur;
getElements.email.onblur;
getElements.tel.onblur;
for(var i=0;i<getElements.tests.length;i++){
if(getElements.tests[i].innerHTML!='OK'){
return;
}
}
alert('验证成功');
}
</script>
</body>
</html>
1回答
-
同学你好，代码整体布局以及验证是可以的。
优化：密码处的验证多了一个点，前面的[]集合中已经包括了点就不需要添加了，否则密码必须输入一个字母/数字/字符+6个以上的点才可以。参考修改
\s取反就是\S，直接使用即可。
祝学习愉快！
0
相似问题