制作网页中的表单并在提交时对输入的内容进行检验

最新推荐文章于 2022-04-24 23:35:35 发布

西域的狼

最新推荐文章于 2022-04-24 23:35:35 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html css3 js

本文链接：https://blog.youkuaiyun.com/u010481357/article/details/16926025

Html css3 js 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在网页中创建表单并利用JavaScript进行前端数据验证，包括TextBox、Password、Radio、Checkbox、Select等控件的使用，以及通过JS进行内容正确性的判断，以提高数据处理效率。

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

为了网页中内容显示呈现的效果有序，我们可以借助Table这个容器将内容进行布局显示，下面将Table的使用进行简单的归纳：
1.表格的结构

<table>           //表
    <tr>          //行
        <td></td> //列
    </tr>
</table>

通过Type属性来判断控件的类型，name属性来给控件命名，可以通过Name来获取控件。

下面是对控件的使用进行归纳：

2.输入框TextBox

 <input type="text" name="name" />

3.密码输入框Password

<input type="password" name="pass" passchar="#"/>

4.单选按钮Radio

 <input type="radio" name="sex" value="男"/>男
 <input type="radio" name="sex" value="女"/>女

5.复选按钮CheckBox

<input type="checkbox" name="hobby" value="1"/>吃饭
<input type="checkbox" name="hobby" value="2"/>睡觉
<input type="checkbox" name="hobby" value="3"/>打豆豆

6.下拉选择框Select

<select name="edu">
       <option value="1">小学及小学以下文化水平</option>
       <option value="2">小学以上文化水平</option>
       <option value="3">博士</option>
       <option value="4">本科</option>
</select>

7.文本输入框Textarea

<textarea name="desc" width="200px" > </textarea>

8.文件浏览File

<input type="file">

9. 在前段输入的内容，可以通过JS进行正确性的判断。避免将输错数据传送到后台。这样可以提高数据处理的效率。

前段的验证数据的JS代码位置在<head></head>内，格式为：

<head>

<script type="text/javascript">
        function chech(){

        //对数据进行验证   
            
        }
    </script>

</head>

10.验证TextBox中是否有数据输入

首先用一个变量将TextBox中的内容接受，可以用过控件的name、id接受内容：

     var name=document.getElementsByName("name");//通过控件name属性，获取控件中的内容
            
            if(name[0].value=="")
            {
                alert(" 名字不能为空！");
                name[0].focus();
                return false;//结束判断，
            }

11.对选择Radio进行验证，并输出选择的内容，这里以性别为例：

    var sex = document.getElementsByName("sex");
            if(sex[0].checked){                //sex[]数组中第一个选中
                alert("你选择了"+ sex[0].value);//弹窗输出选择的控件的值
               
            }
            else {
                alert("你选择了"+ sex[1].value);
               
            }

12.获取复选框的内容，弹窗输入复选框的选中状态

var hobby=document.getElementsByName("hobby");  //接受内容
            var str="";
            for(var h=0;h<hobby.length;h++){        //因为复选框中的内容放在一个数组中，所以用循环来判断
                if(hobby[h].checked){               //选中
                    str+=hobby[h].value+'-';        //将选中的复选框的Value用-连接，存在字符串中
                }
            }
         str=str.substring(0,str.length-1);   //去除最后的'-'
            alert("你选择的爱好："+str);        //将字符串弹窗输出

13.获取下拉框中选中的内容

    var edu=document.getElementsByName("edu")[0];/*获取下拉框选中的内容*/（注：选中的内容将放在下拉框的第一个位置，下拉框的内容用数组来存储）
            alert("你选择的学历为："+edu.value);     //弹窗输出选中的内容

14.验证的事件的响应，提交按钮Submit

验证的函数check()类型为Boolean，所以当return false，返回假时结束判断，return true，返回真是，对内容进行操作。

 <input type="submit" value="提交"  onclick="return check()"> //当点击提交按钮是，验证的事件开始响应，当验证的check()事假返回的是"true"即返                                                             //回为真时，才将数据进行提交。

15.重置按钮Reset
 <input type="reset" value="重置" >     //按钮响应时将所有舒服的内容进行清空