这样写可以吗？
来源：4-8 编程练习
weixin_慕斯卡3172839
2020-12-08 14:53:10
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
padding: 0;
margin:0;
}
#main{
width: 1000px;
height: 600px;
margin:20px auto;
font-size: 16px;
}
.title{
height: 35px;
line-height: 35px;
text-indent: 20px;
background-color: blue;
color: #fff;
font-size: 24px;
font-weight: 100;
}
.box{
height: 520px;
padding-top: 30px;
text-align: center;
background-color: #ccc;
}
.box span{
display: inline-block;
width: 200px;
text-align: right;
padding-top: 20px;
}
.box .sex{
width: 160.8px;
height:20px;
}
.box .tip{
display: inline-block;
text-align: left;
color: red;
font-size: 12px;
}
.button{
width: 80px;
height: 40px;
background-color: blue;
color: #fff;
margin-top: 30px;
font-size: 22px;
border-radius: 5px;
border:solid 1px #000;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<h3 class="title">用户注册</h3>
<div id="box" class="box">
<div>
<span>用户名：</span>
<input type="text" id="user">
<span class="tip"></span>
</div>
<div>
<span>登录密码：</span>
<input type="password" id="password1">
<span class="tip"></span>
</div>
<div>
<span>确认密码：</span>
<input type="password" id="password2">
<span class="tip"></span>
</div>
<div>
<span>姓名：</span>
<input type="text" id="myName">
<span class="tip"></span>
</div>
<div>
<span>性别：</span>
<select id="sex" class="sex">
<option value="men">男</option>
<option value="women">女</option>
</select>
<span ></span>
</div>
<div>
<span>身份证号码：</span>
<input type="text" id="idNumber">
<span class="tip"></span>
</div>
<div>
<span>邮箱：</span>
<input type="text" id="mailbox">
<span class="tip"></span>
</div>
<div>
<span>手机号码：</span>
<input type="text" id="phoneNumber">
<span class="tip"></span>
</div>
<input type="button" value="提交" id="button" class="button">
</div>
</div>
<script type="text/javascript">
//获取元素
var user=document.getElementById("user"),
password1=document.getElementById("password1"),
password2=document.getElementById("password2"),
myName=document.getElementById("myName"),
idNumber=document.getElementById("idNumber"),
mailbox=document.getElementById("mailbox"),
phoneNumber=document.getElementById("phoneNumber"),
button=document.getElementById("button"),
tips=document.getElementsByClassName("tip");
//添加事件
user.onblur = function () {
pattern = /^[a-zA-Z]\w{5,19}$/;
if(pattern.test(this.value)){
tips[0].innerHTML="ok";
}else{
tips[0].innerHTML="请输入6-20位字母、数字或“_”,字母开头"
}
}
password1.onblur = function(){
pattern = /^\S{6,18}$/;
if(pattern.test(this.value)){
tips[1].innerHTML = "ok";
}else{
tips[1].innerHTML = "请输入6-18位，包括数字字母或符号，中间不能有空格";
}
}
password2.onblur = function(){
if(password1.value==''){
tips[2].innerHTML = "请设置密码";
}else{
if(this.value==password1.value){
tips[2].innerHTML = "ok";
}else{
tips[2].innerHTML = "两次输入密码不一致";
}
}
}
myName.onblur = function(){
pattern = /^[\u4e00-\u9af5]{2,4}$/;
if(pattern.test(this.value)){
tips[3].innerHTML = "ok";
}else{
tips[3].innerHTML = "请输入真实姓名，两位到四位的中文汉字"
}
}
idNumber.onblur = function(){
pattern = /^\d{15}$|^\d{18}$|^\d{17}[X]$/;
if(pattern.test(this.value)){
tips[4].innerHTML = "ok";
}else{
tips[4].innerHTML = "请输入15位或者18位身份证号码";
}
}
mailbox.onblur = function(){
pattern = /^[a-z0-9]+(?:[._-][a-z0-9]+)*@[a-z0-9]+(?:[._-][a-z0-9]+)*\.[a-z]{2,4}$/i;
if(pattern.test(this.value)){
tips[5].innerHTML = "ok";
}else{
tips[5].innerHTML = "请输入正确的邮箱";
}
}
phoneNumber.onblur = function(){
pattern = /^(13)\d{9}$|^(147)\d{8}$|^(15)[0-35-9]\d{8}$|^(18)[25-9]\d{8}$/;
if(pattern.test(this.value)){
tips[6].innerHTML = "ok";
}else{
tips[6].innerHTML = "请输入正确的手机号";
}
}
button.onclick = function(){
var sum=0;
for(var i=0;i<tips.length;i++){
if(tips[i].innerHTML=="ok"){
sum+=1;
}
}
console.log(sum);
if(sum==tips.length){
alert("验证成功");
}else{
alert("验证失败");
}
}
</script>
</body>
</html>
1回答
-
同学你好， 代码实现是可以的，有一个小细节需要注意修改下，身份证号最后一位输入小写字母x，无法通过验证，如下图所示：
建议修改：添加修饰符i，不区分大小写，示例：
祝学习愉快~
1
相似问题