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

本文介绍了如何在网页中创建表单并利用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="重置" >     //按钮响应时将所有舒服的内容进行清空




    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值