老师帮忙看一下,正则好像有点小问题

老师帮忙看一下,正则好像有点小问题

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

*{

margin: 0;

padding: 0;

}

.container{

width: 800px;

margin: 0 auto;

}

.title{

height: 40px;

padding: 0 20px;

font-size: 20px;

color: white;

line-height: 40px;

background-color: rgb(48,146,209);

}

.main{

background-color: rgb(238,238,238);

height: 600px;

}

.content{

    width: 500px;

margin: 0 auto;

border: 1px solid black;

}

span{

color: #75b178;

}

#tips{

color: red;

display: none;

}

input,select{

width: 100px;

vertical-align: text-bottom

}

.input-group{

line-height: 60px;

}

</style>

</head>

<body>

<div class="container">

<p class="title">用户注册</p>

<div class="main">

<div class="content">

<div class="input-group">

<span>用户名:</span>

<input type="text" />

<span id="tips">OK</span>

</div>

<div class="input-group">

<span>登录密码:</span>

<input type="password" />

<span id="tips">OK</span>

</div>

<div class="input-group">

<span>确认密码:</span>

<input type="password" />

<span id="tips">OK</span>

</div>

<div class="input-group">

<span>姓名</span>

<input type="text" />

<span id="tips">OK</span>

</div>

<div class="input-group">

<span>性别:</span>

<select>

<option>男</option>

<option>女</option>

</select>

</div>

<div class="input-group">

<span>身份证号码:</span>

<input type="text" />

<span id="tips">OK</span>

</div>

<div class="input-group">

<span>邮箱:</span>

<input type="text" />

<span id="tips">OK</span>

</div>

<div class="input-group">

<span>手机号码:</span>

<input type="text" />

<span id="tips">OK</span>

</div>

<button type="button">提交</button>

</div>

</div>

</div>

<script type="text/javascript">

var tips = document.querySelectorAll("#tips")

var btn = document.querySelector("button")

var regS = {

0: /^[a-z]\w{5,19}$/, //用户名

1: /^\w{6,18}$/, //密码

2: /^\w{6,18}$/, //确认密码

3: /^[\u4e00-\u9fa5]{2,4}$/, //名字

4: /^(\d{14}|\d{17})(X|\d)$/, //身份证

5: /^\w+@([a-zA-Z]+\.)+[a-z]{2,4}$/, //邮箱

6: /^1((30)|(31)|(32)|(33)|(34)|(35)|(36)|(37)|(38)|(39)|(47)|(50)|(51)|(52)|(53)|(55)|(56)|(57)|(58)|(59)|(80)|(82)|(85)|(86)|(87)|(88)|(89))\d{8}$/

}

var tipsss = {

0: "6-20位的字母、数字或'_',字母开头",

1: "数字、字母或符号,中间不能有空格",

2: "两次输入密码不一致!",

3: "两到四位的中文",

4: "请输入18位的身份证号码",

5: "邮箱格式不正确",

6: "电话号码不正确"

}

btn.onclick = function() {

var num = 0

for (i = 0; i < tips.length; i++) {

num = num + test(i)

}

if(num==7){

alert("注册成功")

}

}

for (var i = 0; i < tips.length; i++) {

trueORfalse(tips[i], i)

}


function trueORfalse(ele, index) {

ele.previousElementSibling.onblur = function() {

test(index)

}

}


function test(index) {

if (index == 2) {

var reg = new RegExp(tips[1].previousElementSibling.value)

console.log(reg)

} else {

var reg = regS[index]

}

if (!reg.test(tips[index].previousElementSibling.value)) {

tips[index].style.display = "inline"

tips[index].innerHTML = tipsss[index]

} else {

tips[index].style.display = "inline"

tips[index].innerHTML = "正确"

return 1

}

}

</script>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕慕子 2020-05-28 09:45:42

同学你好,老师又测试了下,同学代码实现是没有问题的。同学具体是觉得是哪里存在问题呢,可以详细描述下,便于帮助同学准确高效的定位与解决问题。

这里是老师粘贴测试同学代码时的疏忽,多粘贴了部分内容,非常抱歉,希望同学能够谅解,老师以后也会更加严格的要求自己,给同学更好的解答问题。

祝学习愉快~

  • 我只是觉得初学肯定会有什么差错,如果没有的话真的是太好了
    2020-05-28 13:14:22
好帮手慕慕子 2020-05-27 09:44:25

同学你好, 因为如下所示位置,for循环语法书写有问题,导致代码报错无法实现效果,建议修改:

http://img1.sycdn.imooc.com//climg/5ecdc5c2095affe707080133.jpg

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师