javascript写一个表单_js怎么创建表单-CSDN博客

本文链接：https://blog.csdn.net/builie0748594740/article/details/127823207

作为理解的话可以看一下，css部分随便写的，主要看js部分和html部分

<!DOCTYPE html>
<html lang="en">
    <!-- onblur失去焦点时发生；onkeyup事件会在键盘被松开时触发；onfocus焦点事件placeholder提示输入框中所需的内容;
    
    checked默认选择-->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta id="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <style>
        .biaodan {
            border: solid 1px black;
            text-align: center;
            margin: 40px;
            padding: 20px;
            height: 400px;
            width: 300px;
            position: relative;
            left: 36%;
            top: 50%;
            background-color: rgb(236, 238, 216);
        }
    </style>
    <script>
        function shoeTips(spanid,tips){
            var span=document.getElementById(spanid);
            span.innerHTML=tips;
        }
        function hint(){
            var value=document.getElementById('value').value;
            var hint=document.getElementById('hint');
            if(value.length<6){
                hint.innerHTML='*账号太短';
                return false;
            }
            else if(value.length>8){
                hint.innerHTML='*账号太长';
                return false;
            }
            else{
                hint.innerHTML='*账号合适';
                return true;
            }
        }
        function hint_hide(){
            var hint=document.getElementById('hint')
            hint.innerHTML=''
        }
        function checkPass(){
            var pass_value=document.getElementById('pass_value').value;
            var pass_hint=document.getElementById('pass_hint');
            if(pass_value.length!=6){
                pass_hint.innerHTML='密码长度错误';
                return false;
            }
            else{
                pass_hint.innerHTML='密码格式正确';
                return true;
            }
        }
        function pass_hide(){
            var pass_hint=document.getElementById('pass_hint');
            pass_hint.innerHTML='';
        }
        function checkPass_2(){
            var pass_value=document.getElementById('pass_value').value;
            var pass_value_2=document.getElementById('pass_value_2').value;
            var pass_hint_2=document.getElementById('pass_hint_2');
            if(pass_value_2!=pass_value){
                pass_hint_2.innerHTML='密码不一致';
                return false;
            }
            else{
                pass_hint_2.innerHTML='';
                return true;
            }
        }
        function pass_hide_2(){
            var pass_hint_2=document.getElementById(pass_hint_2);
            pass_hint_2.innerHTML='';
        }
        function checkForm(){
            var flag=hint() && checkPass() && checkPass_2();
            return flag;
        }
    </script>
</head>

<body>
    <form action="#" onsubmit="return checkForm()">
        <div class="biaodan">
            <h3>欢迎来到注册界面</h3>
            <br>
            账号：<input type="text" id="value" name="user_name" onfocus="shoeTips('hint','账号长度不能小于6,不能大于8')" onkeyup="hint()" onblur="hint_hide()">
            <span id="hint"></span>
            <br>
            <br>
            密码：<input type="password" id="pass_value" name="pass_name" onfocus="shoeTips('pass_hint','密码长度为6位')" onkeyup="checkPass()" onblur="pass_hide()">
            <span id="pass_hint"></span>
            <br>
            <br>
            确认密码：<input type="password" id="pass_value_2" name="pass_name_2" onfocus="shoeTips('pass_hint_2','再次输入密码')" onkeyup="checkPass_2()" onblur="pass_hide_2()">
            <span id="pass_hint_2"></span>
            <br>
            <br>
            性别：<label for="man"></label> 男<input type="radio" id="man" name="sex" checked="checked">
                <label for="woman"></label> 女<input type="radio" id="woman" name="sex" >
            <br>
            <br>
            爱好：
            旅游<input type="checkbox" id="checkboxchoose" >
            游戏<input type="checkbox" id="checkboxchoose" >
            撩妹<input type="checkbox" id="checkboxchoose" checked="checked">
            看书<input type="checkbox" id="checkboxchoose" >
            <br>
            <br>
            <br>
            <input type="submit" id="sure">
        </div>
    </form>
</body>

</html>