为什么在弹窗点击确定后，三个输入框会被清空？
来源：3-9 编程练习
慕尼黑5122342
2019-09-14 20:02:59
<!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;
var pattern=/正则/;
username.onfocus=function (){
spans[0].innerHTML="请输入6-18位字母、数字、下划线";
}
username.onblur=function (){
if(this.value==""){
spans[0].innerHTML="不能为空";
}else{
pattern=/^\w{6,18}$/;
if(pattern.exec(this.value)){
spans[0].innerHTML="";
input1=true;
}else{
spans[0].innerHTML="账户名错误";
}
}
}
chinaName.onfocus=function (){
spans[1].innerHTML="请输入中文名字";
}
chinaName.onblur=function (){
if(this.value==""){
spans[1].innerHTML="不能为空";
}else{
pattern=/^[\u4e00-\u9fa5]{2,5}$/;
if(pattern.exec(this.value)){
spans[1].innerHTML="";
input2=true;
}else{
spans[1].innerHTML="中文名格式不正确";
}
}
}
email.onfocus=function (){
spans[2].innerHTML="请输入邮箱";
}
email.onblur=function (){
if(this.value==""){
spans[2].innerHTML="不能为空";
}else{
pattern=/^\w+@\w+\.[a-zA-Z_]{2,3}$/;
if(pattern.exec(this.value)){
spans[2].innerHTML="";
input3=true;
}else{
spans[2].innerHTML="邮箱格式不正确";
}
}
}
submit.onclick=function (){
if(input1||input2||input3){
alert("注册成功");
}else{
alert("请按照要求填写信息");
}
}
</script>
</body>
</html>
1回答
-
同学你好， 因为表单提交后， 浏览器默认会刷新当前页面哦。
可以阻止浏览器默认事件，阻止刷新页面哦， 另， 需要三个同时都为真的时候，才可以提交表单哦，所有需要将或运算符改成与运算符
第一次输入为正确格式， 然后修改为错误格式也是可以提交表单的。建议： 可以在不符合验证规则的时候， 将input1(input2/input3)修改为false, 这里以用户名为例， 其他的也是同样的道理， 同学自己下去修改即可
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题
回答 5