正则表达式的练习题，用户表单
来源：4-8 编程练习
慕前端2185815
2020-12-25 17:52:25
# 具体遇到的问题
1、点击按钮后弹出框的提示都是提交成功，没有请填写完整呢？
2、只填写用户名后，点击按钮，提示框为什么都是ok
3、如何设置提交成功后，页面初始化
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>正则表达式的特殊字符</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
h1{
height:80px;
background-color:#a94867;
color:#fff;
line-height:80px;
text-indent:20px;
}
h2{
width:650px;
height:30px;
text-align:center;
margin:10px auto;
}
.text{
display:inline-block;
text-align:right;
font-size:20px;
width:100px;
vertical-align: center;
line-height:30px;
}
input{
width:200px;
height:20px;
vertical-align: center;
}
select{
width:204px;
height:24px;
vertical-align: center;
}
.matchResult{
display:inline-block;
height:30px;
width:300px;
line-height:30px;
vertical-align: center;
text-indent:10px;
color:#f01400;
font-size:14px;
/*background-color:#a94867;*/
}
#btn{
width:60px;
height:40px;
margin:10px auto;
line-height:40px;
background-color:#a94867;
color:#fff;
border-radius:5px;
}
#btn:hover{
box-shadow: 0 0 5px 0 #eee;
}
</style>
</head>
<body>
<h1>用户注册</h1>
<h2><span class="text">用户名：</span><input type="text" name="username" id="username" title="^[a-zA-Z]\w{5,19}$"><span class="matchResult " title="6-20位字母、数字或下划线,字母开头"></span></h2>
<h2><span class="text">登录密码：</span><input type="password" name="pwd1" id="pwd1" title="^\S{6,18}$"><span class="matchResult " title="6-18位，数字字母或符号，不能有空格。"></span></h2>
<h2><span class="text">确认密码：</span><input type="password" name="pwd2" id="pwd2"><span class="matchResult " title="两次输入密码不一致"></span></h2>
<h2><span class="text">姓名：</span><input type="text" name="name" id="name" title="^[\u4e00-\u9fa5]{2,4}$"><span class="matchResult " title="真实姓名，两位到四位的中文汉字"></span></h2>
<h2><span class="text">性别：</span>
<select id="sex">
<option value='man' selected="selected">男</option>
<option value='woman'>女</option>
</select>
<span class="matchResult "></span></h2>
<h2><span class="text">身份证号：</span><input type="text" name="ID" id="ID" title="^\d{15}|\d{18}$"><span class="matchResult" title="15位或者18位的数字"></span></h2>
<h2><span class="text">邮箱：</span><input type="text" name="email" id="email" title="^\w+@(?:[a-zA-Z]+\.)+[a-zA-Z]+$"><span class="matchResult " title="邮箱格式有误"></span></h2>
<h2><span class="text">手机号码：</span><input type="text" name="tel" id="tel" title="^(1(3|(5(?!4))|(8(?![134])))(\d{8}))|(147\d{9})$"><span class="matchResult " title="号码有误"></span></h2>
<h2><input type="button" name="btn" value="提交" id="btn"></h2>
<script type="text/javascript">
var box = {
username :byId('username'),
pwd1 : byId('pwd1'),
pwd2 :byId('pwd2'),
name :byId('name'),
ID :byId('ID'),
email :byId('email'),
tel :byId('tel')
}
var elems={
btn :byId('btn')
}
//获取元素的方法
function byId(elem){
return document.getElementById(elem);
}
//查找下一个兄弟节点的方法
function getNextElementSibling(node){
var o = node;
while(o.nextSibling!==null){
if (o.nextSibling.nodeType==1){
return o.nextSibling;
}
o=o.nextSibling;
}
}
//元素添加失焦事件的方法
function setOnblur(elem){
elem.onblur=function(){
var pattern = new RegExp(this.title,'g');
if(pattern.test(this.value)){
getNextElementSibling(this).innerHTML ='OK ';
}else{
getNextElementSibling(this).innerHTML =getNextElementSibling(this).title ;
}
}
}
//两次密码验证的方法
function setOnblurPasswordVertify(elem){
elem.onblur=function (){
if(this.value==''){
getNextElementSibling(this).innerHTML='请输入确认密码';
}
else if(this.value!==pwd1.value){
getNextElementSibling(this).innerHTML=getNextElementSibling(this).title;
}else if(this.value==pwd1.value){
getNextElementSibling(this).innerHTML='OK';
}
}
}
//点击按钮验证内容的方法
function setVertifyBtn(btn){
var num=0;
var arr = Object.keys(box);
btn.onclick=function(){
for(k in box){
var pattern = new RegExp(box[k].value,"g");
if(box[k]!='pwd2'){
if(pattern.test(box[k].value)){
getNextElementSibling(box[k]).innerHTML ='OK ';
num++;
}else{
getNextElementSibling(box[k]).innerHTML =getNextElementSibling(box[k]).title ;
}
}else{
if(box[k].value==''){
getNextElementSibling(box[k]).innerHTML='请输入确认密码';
}else if(box[k].value!==pwd1.value){
getNextElementSibling(box[k]).innerHTML=getNextElementSibling(box[k]).title;
}else if(box[k].value==pwd2.value){
getNextElementSibling(box[k]).innerHTML='OK';
num++;
}
}
}
if(num==arr.length){
alert('提交成功');
return;
}else{
alert('请填写完整');
}
}
}
for( k in box){
if(k!='pwd2'){
setOnblur(box[k]);
}else{
setOnblurPasswordVertify(box[k]);
}
}
setVertifyBtn(elems.btn);
</script>
</body>
</html>
1回答
-
好帮手慕久久
2020-12-25
同学你好，代码中有如下问题：
1、不填任何信息，点击提交按钮时，会提示提交成功。原因是通过box[k].value无法获取到真正的正则表达式，正则表达式位于input元素的title属性上，如下：
通过box[k].value获取到的正则形式如下：
该正则可以匹配到空格，如下：
所以即使不输入内容，也能验证通过，因此弹出成功。可做如下修改：
2、上述调整后，点击提交按钮，确认密码后面的提示信息不对：
原因是如下判断不对（dom元素与字符串pwd2不相等）：
应该使用k来判断，修改如下：
这样调整后，只填写用户名，提示信息就正确了。
3、身份证输入如下形式也正确：
原因是正则表达式书写不对，可做如下修改：
4、如果提交成功后，想清空提示信息，可参考如下方案：
5、建议把var num = 0;写在点击事件的处理函数中，即每次点击都把num清零。否则每次点击按钮，num值都会记录上一次的结果，然后继续计算：
祝学习愉快！
0
相似问题