麻烦老师检查

来源：3-9 编程练习

weixin_慕码人1392209

2020-05-14 11:36:40

<!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(!pattern.exec(this.value)){
       spans[0].innerHTML = '格式不正确';
       input1=false;
      }else{
       spans[0].innerHTML = '';
       input1 = true;
      }
     }
     chinaName.onfocus = function(){
      spans[1].innerHTML = '请输入中文名字';
     }
     chinaName.onblur = function(){
      var pattern = /^[\u4e00-\u9fa5]{2,4}$/;
      if(!pattern.exec(this.value)){
       spans[1].innerHTML = '格式不正确';
       input2=false;
      }else{
       spans[1].innerHTML = '';
       input2 = true;
      }
     }
     email.onfocus = function(){
      spans[2].innerHTML = '请输入邮箱';
     }
     email.onblur = function(){
      var pattern = /^\w+@\w+\.(?:com|cn|edu|gov)$/;
      if(!pattern.exec(this.value)){
       spans[2].innerHTML = '格式不正确';
       input3 = false;
      }else{
       spans[2].innerHTML = '';
       input3 = true;
      }
     }
     submit.onclick = function(){
      if(!input1 | !input2 | !input3){
       alert('请填写完整信息');
      }else{
       alert('填写正确');
      }
     }
    </script>
</body></html>

写回答

1回答