javascript写一个表单

由js从html中获取相关输入的信息，并进行判断：

我是祈哦

912人浏览 · 2022-11-12 17:57:31

我是祈哦 · 2022-11-12 17:57:31 发布

作为理解的话可以看一下，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>

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..