为什么点击“注册”之后，页面刷新了一次，然后输入的内容都没有了

首页课程实战体系课手记专栏慕课教程

来源：3-9 编程练习

慕瓜4374193

2017-11-23 13:08:03

请尽量清晰完善地描述问题，以便大家给予专业的回复。

写回答

3回答

一路电光带火花

2017-11-23

单击注册之后，页面会进行提交呀，然后页面就会刷新，页面刷新，值就没有了。就像一个页面一刷新的话，不就是回归最开始的状态么。

慕瓜4374193

提问者

2017-11-23

<!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 () {
        if(username.value===""){
            spans[0].innerHTML="请输入6-18位的数字、字母，“_”";
        }
    };
    username.onblur=function(){
        var str=username.value;
        var pattern=/^\w{6,18}$/;
        if(pattern.test(str)===true){
            input1=true;
            spans[0].innerHTML="";
        }
        else{
            username.value="";
            spans[0].innerHTML="请输入6-18位的数字、字母，“_”";
        }
    };

    chinaName.onfocus=function () {
        if(chinaName.value===""){
            spans[1].innerHTML="请输入中文名字";
        }
    };
    chinaName.onblur=function(){
        var str=chinaName.value;
        var pattern=/^[\u4e00-\u9f5a]{2,4}$/;
        if(pattern.test(str)===true){
            input2=true;
            spans[1].innerHTML="";
        }
        else{
            chinaName.value="";
            spans[1].innerHTML="格式不正确";
        }
    };

    email.onfocus=function () {
        if(email.value===""){
            spans[2].innerHTML="请输入邮箱";
        }
    };
    email.onblur=function() {
        var str = email.value;
        var pattern = /^\w+@\w+\.[a-zA-Z]{2,4}$/;
        if (pattern.test(str) === true) {
            input3=true;
            spans[2].innerHTML = "";
        }
        else {
            email.value = "";
            spans[2].innerHTML = "格式不正确";
        }
    };

    submit.onclick=function () {
        if(input1===false||input2===false||input3===false){
            alert("请按要求填写信息");
        }
        else{
            alert("注册成功");
        }
    }
    </script>
</body>
</html>

好帮手慕糖

2017-11-23

你好，不太能理解你的意思，建议：详细描述下，或者也可以把你的代码粘贴过来，大家一起讨论下。

祝学习愉快~

0 学习 · 626 问题

查看课程

相似问题

表单验证案例课程里面的3-8选择题答案有错误吧，手机号和邮箱那个才是错的吧

回答 2

3-10表单验证中的登录密码双重验证问题？

回答 2

D选项为什么是错误的

回答 1

作业素材里边没有图片啊

回答 2

JavaScript面向对象测试疑问（2）

回答 1

打开慕课网App查看更多内容