老师需要问一下
来源：3-9 编程练习
宝慕林4466778
2020-06-09 06:56:39
!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位的字母，数字或_';
}
username.onblur=function () {
var pattern =/^\w{6,18}$/
if(username.value==''){
spans[0].innerHTML='请输入用户名';
}else{
if(!pattern.test(username.value)){
spans[0].innerHTML='请输入6-18位的字母，数字或_'
input1=false;
}else{
spans[0].innerHTML='';input1=true;}
}
}
chinaName.onfocus=function () {
spans[1].innerHTML='请输入中文名';
}
chinaName.onblur=function () {
var pattern =/^[\u4e00-\u9fa5]{2,5}$/;
if(chinaName.value==''){
spans[1].innerHTML='请输入有效字符';
}else{
if(!pattern.test(chinaName.value)){
spans[1].innerHTML='请输入中文名'
input1=false;
}else{
spans[1].innerHTML='';input2=true;}
}
}
email.onfocus=function () {
spans[2].innerHTML='请输入邮箱';
}
email.onblur=function () {
var pattern =/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(email.value==''){
spans[2].innerHTML='不能为空';
}else{
if(!pattern.test(email.value)){
spans[2].innerHTML='请输入正确邮箱地址'
input1=false;
}else{
spans[2].innerHTML='';input3=true;}
}
}
submit.onclick=function () {
if(input1==false||input2==false||input3==false){
alert('输入信息有误');
}else{
alert('表单验证正确');
}
}
</script>
</body>
</html>
//这样写我提交表单的时候不就不能显示错误信息在哪了吗？
1回答
-
同学你好，如下所示，当你输入的格式不正确时，输入框下就会有对应的提示.
由于提交表单时，默认会刷新当前页面，而练习要求输入不正确时，停留在当前页。所以可以添加return false，阻止默认事件
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题