javascript表单控件实例讲解

2023年5月28日下午5:30 • JavaScript

JavaScript表单控件实例讲解

JavaScript是一种脚本语言，经常用于网页中对用户输入信息的校验和处理。表单是用户和服务器之间交换数据的最主要方式之一，JavaScript正是被广泛用于表单交互的。

表单控件分类

表单控件通常分为以下几类：

文本类控件：包括文本框、密码框、文本域等；
选择类控件：包括单选框、复选框、下拉框等；
文件上传类控件：用于向服务器上传文件；
按钮类控件：包括提交按钮、重置按钮、普通按钮等。

实例讲解

下面分别使用两个实例，详细讲解表单控件的使用方法。

实例一：表单验证

当用户在表单提交前，需要先验证一些信息是否填写正确。以用户名为例，当用户在用户名文本框输入字符数少于6时，应该提示用户重新输入。

function checkForm(){
    var username = document.getElementById('username').value;
    if(username.length < 6){
        alert('用户名必须至少6个字符！');
        return false;
    }
    //其他表单验证
    return true;
}

上面的代码定义了一个名为checkForm的函数用于表单验证。其中document.getElementById('username').value获取了用户名文本框的值，并判断长度是否小于6，如果小于6则用alert函数提示用户重新输入。最后通过返回值来控制表单是否提交。

实例二：地区选择的级联

有时候我们需要实现地区选择的级联功能。例如，当用户选择“中国”时，下拉框会显示中国的省份列表。选择了某个省份后，下拉框会显示该省份的城市列表。可以通过以下代码实现：

<select id="province" onchange="showCity()">
  <option value="">请选择省份</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <!--其他省份-->
</select>

<select id="city">
  <option value="">请选择城市</option>
</select>

<script>
function showCity(){
  var province = document.getElementById("province").value;
  var city = document.getElementById("city");
  city.options.length = 0;//清空城市列表
  if(province == "beijing"){
    city.add(new Option("海淀区","haidian"));
    city.add(new Option("朝阳区","chaoyang"));
    //其他区县
  }else if(province == "shanghai"){
    city.add(new Option("黄浦区","huangpu"));
    city.add(new Option("徐汇区","xuhui"));
    //其他区县
  }else{
    //其他省份
  }
}
</script>

上面的代码中，定义了两个下拉框控件。在第一个下拉框中使用onchange事件，当用户选择一个省份时，触发showCity函数。该函数根据所选省份的值，动态生成对应省份的城市列表，并把该列表添加到第二个下拉框中，实现了地区选择的级联效果。