4-8练习
来源：4-8 编程练习
夕落呀
2019-01-05 00:49:10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.wrap{
width: 1000px;
margin: 50px auto;
}
.wrap .title{
width: 100%;
padding: 8px 0;
background: #3092d1;
color: #fff;
text-indent: 32px;
}
.wrap .reg{
background: #eee;
}
.reg .form{
width: 100%;
margin: 0 auto;
padding: 50px 0 200px 0;
text-align: center;
position: relative;
}
.reg .form .item{
margin-bottom: 20px;
color: #666;
font-size: 16px;
position: relative;
}
.reg .form .item label{
display: inline-block;
min-width: 100px;
text-align: right;
}
.reg .form .item input{
width: 171px;
}
.reg .form .item .itemText{
position: absolute;
top: 0;
left: 650px;
color: red;
font-size: 14px;
}
.reg .form .btn{
position: absolute;
width: 80px;
border: 0;
outline: 0;
background: #2375ba;
padding: 10px 7px;
color: #fff;
font-size: 18px;
border-radius: 5px;
left: 500px;
bottom: 110px;
}
.reg .form .btn:active{
bottom: 109px;
left:501px;
}
</style>
</head>
<body>
<div id="wrap" class="wrap">
<div class="title">用户注册</div>
<div id="reg" class="reg">
<form id="form" class="form">
<div class="item">
<label>用户名：</label>
<input type="text" name="userName" id="userName">
<span class="itemText"></span>
</div>
<div class="item">
<label>登录密码：</label>
<input type="password" name="password" id="password">
<span class="itemText"></span>
</div>
<div class="item">
<label>确认密码：</label>
<input type="password" name="repassword" id="repassword">
<span class="itemText"></span>
</div>
<div class="item">
<label>姓名：</label>
<input type="text" name="idName" id="idName">
<span class="itemText"></span>
</div>
<div class="item">
<label>性别：</label>
<select name="" id="sex" style="width: 171px;">
<option value="man">男</option>
<option value="women">女</option>
</select>
<span class="itemText"></span>
</div>
<div class="item">
<label>身份证号码：</label>
<input type="text" name="idcard" id="idcard">
<span class="itemText"></span>
</div>
<div class="item">
<label>邮箱：</label>
<input type="text" name="email" id="email">
<span class="itemText"></span>
</div>
<div class="item">
<label>手机号码：</label>
<input type="text" name="phone" id="phone">
<span class="itemText"></span>
</div>
<button id="btn" class="btn">提交</button>
</form>
</div>
</div>
</body>
<script type="text/javascript">
var obj = {
userName: document.querySelector('#userName'),
password: document.querySelector('#password'),
repassword: document.querySelector('#repassword'),
idName: document.querySelector('#idName'),
idcard: document.querySelector('#idcard'),
email: document.querySelector('#email'),
phone: document.querySelector('#phone'),
itemTexts: document.querySelectorAll('.itemText'),
btn: document.querySelector('#btn'),
input1: false,
input2: false,
input3: false,
input4: false,
input5: false,
input6: false,
input7: false
}
obj.userName.onblur = function(){
let reg = /^[a-zA-Z]\w{4,19}$/;
if(!reg.exec(obj.userName.value)){
obj.itemTexts[0].innerHTML = '6-20位字母、数字或“_”,字母开头';
}else{
obj.itemTexts[0].innerHTML = 'ok';
obj.input1 = true;
}
}
obj.password.onblur = function(){
let reg = /^\S{6,18}$/;
if(!reg.exec(obj.password.value)){
obj.itemTexts[1].innerHTML = '6-18位，包括数字字母或符号，中间不能有空格';
}else{
obj.itemTexts[1].innerHTML = 'ok';
obj.input2 = true;
}
}
obj.repassword.onblur = function(){
if(obj.repassword.value == ''){
obj.itemTexts[2].innerHTML = '请设置密码';
}else {
if(obj.repassword.value != obj.password.value){
obj.itemTexts[2].innerHTML = '两次密码不一致';
}else{
obj.itemTexts[2].innerHTML = 'ok';
obj.input3 = true;
}
}
}
obj.idName.onblur = function(){
let reg = /^[\u4e00-\u9fa5]{2,4}$/;
if(!reg.exec(obj.idName.value)){
obj.itemTexts[3].innerHTML = '两位到四位的中文';
}else{
obj.itemTexts[3].innerHTML = 'ok';
obj.input4 = true;
}
}
obj.idcard.onblur = function(){
let reg = /^\d{15}$|^\d{18}$|^\d{17}x$/;
if(!reg.exec(obj.idcard.value)){
obj.itemTexts[5].innerHTML = '请输入18位身份证号码';
}else{
obj.itemTexts[5].innerHTML = 'ok';
obj.input5 = true;
}
}
obj.email.onblur = function(){
let reg = /^\w+@(?:\w+\.)+[a-zA-Z]{2,}$/;
if(!reg.exec(obj.email.value)){
obj.itemTexts[6].innerHTML = '邮箱格式不正确';
}else{
obj.itemTexts[6].innerHTML = 'ok';
obj.input6 = true;
}
}
obj.phone.onblur = function(){
let reg = /^13\d{9}$|^15[^4]\d{8}$|^18(?:[^134])\d{8}$|^147\d{8}$/;
if(!reg.exec(obj.phone.value)){
obj.itemTexts[7].innerHTML = '手机号码格式不正确';
}else{
obj.itemTexts[7].innerHTML = 'ok';
obj.input7 = true;
}
}
obj.btn.onclick = function(){
if(obj.input1 == false || obj.input2 == false || obj.input3 == false || obj.input4 == false || obj.input5 == false || obj.input6 == false || obj.input7 == false){
obj.itemTexts[0].innerHTML = '6-20位字母、数字或“_”,字母开头';
obj.itemTexts[1].innerHTML = '6-18位，包括数字字母或符号，中间不能有空格';
obj.itemTexts[2].innerHTML = '请设置密码';
obj.itemTexts[3].innerHTML = '两位到四位的中文';
obj.itemTexts[5].innerHTML = '请输入18位身份证号码';
obj.itemTexts[6].innerHTML = '邮箱格式不正确';
obj.itemTexts[7].innerHTML = '手机号码格式不正确';
}else{
alert('验证成功');
}
}
</script>
</html>
老师帮忙看看正则写的有问题吗？ js部分还有没有更优化的 感觉写的复杂
1回答
-
你好同学 ，当点击提交的时候 ，如果验证没有通过 ， 提示信息显示里面就消失了 。这是因为form有默认的提交行为 ，它会在提交后刷新页面 ，所以提示信息就没有了 。在提交事件中 ，设置如下阻止默认行为 :
以上是阻止默认行为的方法 。祝学习愉快 ，望采纳 。
0
