老师帮忙检查一下
来源：3-9 编程练习
慕斯卡3605978
2020-04-27 13:47:34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
form{
width:300px;
background:pink;
text-align: center;
padding:30px 0;
margin:100px auto;
}
</style>
</head>
<body>
<form id="form">
<p><input type="text" name="name" id="username" placeholder="请输入账户名"></p>
<span></span>
<p><input type="text" name="chinaName" id="chinaName" placeholder="请输入中文名"></p>
<span></span>
<p><input type="email" name="eamil" id="email" placeholder="请输入邮箱"></p>
<span></span>
<p><input type="submit" value="注册" id="submit"></p>
</form>
<script type="text/javascript">
var spans=document.getElementsByTagName("span");
var username=document.getElementById("username");
var chinaName=document.getElementById("chinaName");
var email=document.getElementById("email");
var submit=document.getElementById("submit");
var input1=false;
var input2=false;
var input3=false;
//验证用户名
username.onfocus = function(){
spans[0].innerHTML = '请输入6-18数字、字母、下划线';
spans[0].style.color = 'green';
}
username.onblur = function(){
var pattern = /^\w{6,18}$/;
if(this.value == ''){
spans[0].innerHTML = '用户名不能为空';
spans[0].style.color = 'red';
}else{
if(!pattern.test(this.value)){
spans[0].innerHTML = '用户名输入不正确';
spans[0].style.color = 'red';
}else{
input1 = true;
spans[0].innerHTML = '';
}
}
}
//验证用户中文名
chinaName.onfocus = function(){
spans[1].innerHTML = '请输入中文名';
spans[1].style.color = 'green';
}
chinaName.onblur = function(){
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
if(this.value == ''){
spans[1].innerHTML = '中文名不能为空';
spans[1].style.color = 'red';
}else{
if(!pattern.test(this.value)){
spans[1].innerHTML = '中文名输入不正确';
spans[1].style.color = 'red';
}else{
input2 = true;
spans[1].innerHTML = '';
}
}
}
//验证邮箱
email.onfocus = function(){
spans[2].innerHTML = '请输入邮箱';
spans[2].style.color = 'green';
}
email.onblur = function(){
var pattern = /^\w+@\w+(?:\.\w+)*(\.[a-z]{2,3})$/;
if(this.value == ''){
spans[2].innerHTML = '邮箱不能为空';
spans[2].style.color = 'red';
}else{
if(!pattern.test(this.value)){
spans[2].innerHTML = '邮箱输入不正确';
spans[2].style.color = 'red';
}else{
input3 = true;
spans[2].innerHTML = '';
}
}
}
//提交前再次验证数据
submit.onclick = function(){
if(input1 && input2 &&input3){
alert('注册成功');
}else{
alert('注册失败');
}
}
</script>
</body>
</html>
1回答
-
同学你好，存在一个问题：第一次输入符合条件的内容，再修改为不符合条件的内容，点击注册按钮时，会弹出注册成功的提示，如下：
建议：如果不符合条件，将标识符修改为false，以第一个输入框为例：
其他地方实现的不错，继续加油，祝学习愉快~
0
相似问题