表单提交并校验

最新推荐文章于 2024-07-10 11:34:09 发布

炬火埋土

最新推荐文章于 2024-07-10 11:34:09 发布

阅读量1.2k

点赞数 1

分类专栏： Javascript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_51526974/article/details/123289719

版权

本文介绍了如何使用JavaScript进行表单验证，包括用户名、密码、年龄、爱好和来自的选择。验证规则包括非空、长度限制及特定条件，满足条件则提交表单，否则显示错误信息。同时，文章讨论了代码中遇到的错误，如函数参数问题、元素获取错误及函数耦合度过高等，并提出了打印选项的实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

表单的需求

验证用户名
（1）不能为空
（2）长度为6-12位
验证密码
（1）不能为空
（2）长度为6-12位
（3）不能包含用户名
年龄：必须选择成年了
爱好：必须选择一项
来自：必须选择一项

如果满足以上所有条件，则弹出所有内容并提交表单。否则说明错误原因，不能提交表单
满足以上条件
1.弹出所有的内容
2.提交表单
否则
1.说明错误原因呢
2.不能提交表单

界面部分

<body>
        <form id="myform" name="myform" >
            姓名：<input type="text" id="uname" name="uname" value="zhangsan" /><br />
            密码：<input type="password" id="upwd" name="upwd" value="1234567" /><br />
            年龄：<input type="radio" name="uage" value="成年了" checked="checked">成年了
                <input type="radio" name="uage" value="还没成年">还没成年<br/>

            爱好：<input type="checkbox" name="ufav" value="篮球">篮球
                 <input type="checkbox" name="ufav" value="睡觉">睡觉
                 <input type="checkbox" name="ufav" value="写代码">写代码
            来自：<select id="ufrom" name="ufrom">
                    <option value="-1" selected="selected">请选择</option>
                    <option value="上海">上海</option>
                    <option value="深圳">深圳</option>
                 </select><br />
            <div id="validate" style="color: red;"></div>
            <button type="button" onclick="checkForm();">提交表单</button>
            <button type="button" onclick="resetForm();">重置表单</button>

            <button type="button" onclick="ShowForm();">显示表单内容</button>
            <button type="button" onclick="printTable();">打印表单内容</button>
        </form>
    </body >

下面是各种函数的功能解释

重置函数

  function resetForm() {
   
           fucking('myform').reset();
       }

将document.getElementById方法进行封装

function fucking(id) {
   
           return document.getElementById(id);
       }

== 将判断输入内容不为空也封装为一个函数==

function CheckNull(str) {
   
            if(str==null||str.trim()==""){
   
                return true;
            }
            return false;
        }

将长度的限制判断也封装为函数

 function CheckLength(str){
   
            if(str.length>12 || str.length<6){
   
                return true;
            }
            return false;
        }

CheckForm函数用来检查用户提交的数据是否符合规范

function checkForm() {
   
          /*获取用户名*/
           const uname = fucking('uname').value;
           if(CheckNull(uname)){
   
               fucking('validate').innerHTML =

最低0.47元/天解锁文章