老师请问一下怎么停止加载页面呢

来源:3-9 编程练习

慕斯卡8252506

2019-07-20 14:29:19

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>练习</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 = "用户名不能为空";
}
username.onblur = function() {
    var patt = /\w{6,18}/
    if(!patt.exec(this.value)) {
        spans[0].innerHTML = "6-18位字母、数字或“_”,字母开头"
    } else {
        spans[0].innerHTML = "";
        input1 = true;
    }
}
chinaName.onfocus = function() {
    spans[1].innerHTML = "真实名字不能为空";
}
chinaName.onblur = function() {
    var patt = /[\u4e00-\u9fa5]{2,5}/
    if(!patt.exec(this.value)) {
        spans[1].innerHTML = "请输入2-5为中文名字"
    } else {
        spans[1].innerHTML = "";
        input2 = true;
    }
}
email.onfocus = function() {
    spans[2].innerHTML = "邮箱不能为空";
}
email.onblur = function() {
    var patt = /\w+@\w+\.[a-zA-z_]/
    if(!patt.exec(this.value)) {
        spans[2].innerHTML = "格式有误,请重新输入"
    } else {
        spans[2].innerHTML = "";
        input3 = true;
    }
}

//点击注册时,验证用户填写的全部信息
submit.onclick = function() {
    if(input1 == false || input2 == false || input3 == false) {
        alert("请按要求填写信息");
    } else {
        alert("注册成功");
    }
}</script>
    </body>
</html>

写回答

1回答

好帮手慕慕子

2019-07-20

同学你好, 你这里是想问,在验证成功后,点击确定按钮不刷新页面吗?

如果是这样的话, 那么是因为点击submit按钮会自动提交表单刷新页面。

建议修改:可以添加一个return false语句, 阻止浏览器默认事件

http://img.mukewang.com/climg/5d32ba0f00017e9606700253.jpg

如果帮助到了你, 欢迎采纳!

祝学习愉快~~~~


0

0 学习 · 14456 问题

查看课程

相似问题