老师帮忙检查下，老师邮箱正则感觉写法很多，不知道标准是啥
来源：3-9 编程练习
母鸡阿
2020-11-09 10:41: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位数字、字母、下划线";
}
username.onblur = function(){
if(username.value==""){
spans[0].innerHTML = "输入内容不能为空";
spans[0].style.color = 'red';
}else{
var pattern = /^\w{6,18}$/;
if(pattern.exec(username.value)){
spans[0].innerHTML = "输入正确";
spans[0].style.color = 'green';
input1 = true;
}else{
spans[0].innerHTML = "格式不正确";
spans[0].style.color = 'red';
}
}
}
chinaName.onblur = function(){
if(chinaName.value==""){
spans[1].innerHTML = "输入内容不能为空";
spans[1].style.color = 'red';
}else{
var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
if(pattern.exec(chinaName.value)){
spans[1].innerHTML = "输入正确";
spans[1].style.color = 'green';
input2 = true;
}else{
spans[1].innerHTML = "格式不正确";
spans[1].style.color = 'red';
}
}
}
email.onblur = function(){
if(email.value==""){
spans[2].innerHTML = "输入内容不能为空";
spans[2].style.color = 'red';
}else{
var pattern = /^[a-z1-9\.]*[a-z0-9]+@[a-z1-9\.]*[\.a-z]{2,4}$/i;
if(pattern.exec(email.value)){
spans[2].innerHTML = "输入正确";
spans[2].style.color = 'green';
input3 = true;
}else{
spans[2].innerHTML = "格式不正确";
spans[2].style.color = 'red';
}
}
}
submit.onclick = function(){
if(input1&&input2&&input3){
alert("提交成功");
}else{
alert("信息填写不完整");
}
}
</script>
</body>
</html>
3回答
-
同学你好，默认行为就是标签自带的行为，比如点击a标签就会跳转页面，该跳转行为就是它的默认行为；再比如点击submit按钮，页面就会刷新一下，这也是默认行为。同学暂时了解即可，以后还会接触到，此处只是老师为你扩展了一下。
祝学习愉快！
0 -
母鸡阿
提问者
2020-11-09
老师禁掉默认行为啥意思这么说还是不理解 其他的都OK啦
0 -
好帮手慕久久
2020-11-09
同学你好，代码中有如下问题：
1. 先输入正确的信息，再修改其中一项不正确，点击“注册”按钮，依旧能提交成功：
原因是验证不通过时，没有修改对应变量的值为false，以用户名为例，修改如下：
其他几项，同学也要这样调整一下。
2. 优化建议：
点击注册按钮，页面会进行刷新，这是因为type属性值为submit的按钮，有默认提交表单的行为，可以禁掉该行为，如下：
该内容，后面的课程还会接触到，同学暂时了解即可。
问题解答如下：
邮箱的验证写法很灵活，没有统一的规范，只要能满足需求即可。建议同学先这样写，如果遇到了特殊的邮箱，再对应调整正则即可。
祝学习愉快！0
相似问题