3-9 编程练习

来源：3-9 编程练习

JakePrim

2019-08-08 11:11: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(this.value == ''){
             spans[0].innerHTML = '账户名不能为空';
         }else{
             if(pattern.test(this.value)){
                 input1 = true;
                 spans[0].innerHTML = '';
             }else{
                 spans[0].innerHTML = '格式不正确';
             }
         }
     }
     
     chinaName.onfocus = function(){
         spans[1].innerHTML = '请输入2-5位的中文名';
     }
     
     chinaName.onblur = function(){
         var pattern = /^[\u4e00-\u9fa5]{2,5}$/;
         if(this.value == ''){
             spans[1].innerHTML = '姓名不能为空';
         }else{
             if(pattern.test(this.value)){
                 input2 = true;
                 spans[1].innerHTML = '';
             }else{
                 spans[1].innerHTML = '格式不正确';
             }
         }
     }
     
     email.onfocus = function(){
         spans[2].innerHTML = '请输入邮箱';
     }
     
     email.onblur = function(){
         var pattern = /^[a-z0-9]+(?:[.-_][a-z0-9]+)*@[a-z0-9]+([.-_][a-z0-9]+)*\.[a-z]{2,4}$/;
         if(this.value == ''){
             spans[2].innerHTML = '邮箱不能为空';
         }else{
             if(pattern.test(this.value)){
                 input3 = true;
                 spans[2].innerHTML = '';
             }else{
                 spans[2].innerHTML = '格式不正确';
             }
         }
     }
     
     submit.onclick = function(){
         if(!input1 || !input2 || !input3){
             alert('请按照要求完成信息');
         }else{
             alert('注册成功');
         }
     }
     
     
    </script>
</body>

</html>

写回答

1回答