8.7 处理表单事件

作者: liufeisheng

创建时间: 2024-05-15 01:11:42

表单事件就是在表单操作时发生的事件。例如，表单输入前的双击操作，表单提交时密码和确认密码的确认操作等。

表单是一个容器对象，用来存放表单对象，并负责将表单对象的值提交给服务器端的某个程序处理。它的应用范围非常广泛，不仅可用于收集信息和反馈意见，还可用于资料检索、网上购物等交互式场景。

表单对象是表单中所包含的用于不同目的的控件，比如文本框、密码框、按钮、复选框等。

8.7.1 表单和表单对象

定义表单

我们使用

标签定义表单，语法如下。

<form id="formid" name="myForm" method="post"     action="check.php">
   …
</form>

2. 文本框

文本框是用于输入单行文本的表单控件，通常用来填写用户名以及简单的回答。使用标签定义单行文本框，实现如下。

单选按钮单选按钮是用于从多个项目中选一个项目的表单控件，将标签的type属性设置为radio即可定义单选按钮。语法如下。 <input type="radio" value="female" name="gender" checked>女 <input type="radio" value="male" name="gender">男

4. 复选框

复选框是用于选择或取消某个项目的表单控件，将标签的type属性设置为checkbox即可定义复选框。语法如下。

5. 列表或菜单

列表或菜单是用于从多个项目中选择某个项目的表单控件，使用select标签定义列表或菜单。语法如下。

<select name="name" size="3" multiple> 
    <option value="beijing" selected>北京</option>
   <option value="tianjin">天津</option>
   <option value="shanghai" selected>上海</option>
</select>

按钮

HTML支持3种类型的按钮，即普通按钮、提交按钮和重置按钮。单击普通按钮实现某些操作，比如弹出提示、得到信息等；单击提交按钮，能够将表单中的数据提交到服务器；单击重置按钮，能够将表单中所有控件的值设置为初始值。使用input标签定义按钮，通过type属性指定按钮的类型，其中type="button"表示定义普通按钮，type="submit"表示定义提交按钮，type="reset"表示定义重置按钮，语法如下。

<input type="button" value="问好" name="hello" />
<input type="submit" name="submit" />
<input type="reset" name="reset" />

课堂作业：
根据所学内容，完成如下练习

效果图如下通过极域电子教室提交，姓名.html或姓名.txt

8.7.2 访问表单和表单元素


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机生成指定位数的验证码——访问表单元素</title>
</head>

<body>
    <form name="myform">
        请输入要产生的验证码的位数：
        <input type="text" name="num" id="num">
        <br><br>
        <input type="button" value="生成" id="generate"> &nbsp;&nbsp;
        <input type="button" value="刷新" id="refresh">
        <br><br>
        <div id="result"></div>
    </form>
    <script type="text/javascript">
        var num = document.getElementById("num");
        var result = document.getElementById("result");
        var generate = document.querySelector("#generate");
        var refresh = document.querySelector("#refresh");
        function rad(num) //生成随机数
        {
            var result = "";
            for (i = 0; i < parseInt(num); i++) {
                result = result + (parseInt(Math.random() * 10)).toString();
            }
            return result;
        }
        generate.onclick = function () { //显示
            if (check(num.value))
                result.innerHTML = "产生的验证码是： " + rad(num.value);
            else
                result.innerHTML = "重新输入合法的数字";
        }
        refresh.onclick = function () { //清空
            num.value = "";
        }
        function check(num) //判断是不是数字
        {
            if (isNaN(num)) {
                alert("您输入的是非数字，请输入数字");
                return false;
            }
            if (num < 0) {
                alert("您输入的数字要求大于等于0，请重新输入");
                return false;
            }
            return true;
        }
    </script>
</body>

</html>

通过表单的ID来访问表单

首先，我们需要给表单或者表单元素定义id属性，然后使用document. getElementById()方法获取对应的DOM对象，语法如下。

通过表单名称来访问表单

首先，我们需要给表单或者表单元素定义name属性，然后使用document. getElementsBy Name()方法获取对应的DOM对象，语法如下。

通过表单标签名来访问表单

在这里，我们不需要定义任何属性，而是直接使用document.getElementsByTagName()方法来获取对应的DOM对象，语法如下。

8.7.3 操作表单对象

禁用和启用表单对象

表单对象的disabled属性，如果设置为true，代表禁用这个表单对象；设置为false，将启用这个表单对象。具体应用如【例8-8】所示。

当我们单击“禁用”按钮时，文本框中的文字变成灰色，即禁用状态，如图8-36所示；当我们单击“启用”按钮时，文本框的文字变成黑色，即可以使用的状态，如图8-37所示。

表单对象获得和失去焦点

当我们的页面上有多个文本框时，我们需要在某个文本框上双击，这个文本框就获得了焦点，可以使用表单对象的focus()方法实现同样的效果。同样如果想让某个表单对象失去焦点，那么可以使用blur()方法实现。具体应用如【例8-9】所示。当我们单击“获得焦点”按钮时，文本框中的文字呈现闪烁状态，如图8-38所示；当我们单击“失去焦点”按钮时，文本框的文字不再闪烁，如图8-39所示。

提交表单

提交表单是指将用户在表单中填写或选择的内容传送给服务器端的特定程序（由action属性指定），然后由该程序进行具体的处理。将表单数据提交给服务器端的方法有两种。

单击表单中的“提交”按钮；第二种方法是调用表单对象的submit()方法。这两种方法基本相同，不同之处在于第一种方法执行事件处理函数onsubmit，并且可能阻止表单提交；将数据直接提交给服务器。在这里我们使用第一种方法介绍表单的提交，语法如下。

重置表单重置表单是指对用户在表单中填写或选择的内容进行重新设置，要调用表单的reset()方法，语法如下。 myform.reset();
表单验证

表单验证是指在用户提交表单之前，需要对用户输入的数据进行有效性验证，如果满足有效性要求，则提交表单。例如，在表单注册页面，验证用户输入的身份证号码是否正确、年龄是否符合要求等。

验证表单分为服务器端表单验证和客户端表单验证。服务器端的表单验证是指在服务器端接收到用户提交数据后进行验证工作客户端表单验证是指在向服务器端提交表单数据之前进行表单验证工作。使用JavaScript实现客户端验证，可以防止无效数据传送到服务器，减轻服务器的数据处理负担，从而提高系统性能。

在表单的onsubmit事件处理函数中进行表单验证，语法如下。

onsubmit事件会在单击表单中的确认按钮时发生。验证函数根据表单对象的值返回true或false，若返回true则表单被提交，否则表单不被提交。

<form name="myform" id="myform" method="post" action="服务器端脚本" onsubmit="return 验证函数">

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>验证表单合法性——表单验证</title>
</head>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>验证表单文本框提交内容的合法性示例</title>
    <script type="text/javascript">
        function checkFields()//是否为空
        {
            if (fm.txtUserName.value == "") {
                alert("用户名不能为空");
                fm.txtUserName.focus();
                return false;
            }
            if (fm.txtPwd.value == "") {
                alert("密码不能为空");
                fm.txtPwd.focus();
                return false;
            }
            return true;
        }
        function formReset() {
            document.getElementByid("myform").reset();
        }
    </script>
</head>

<body>
    <form name="fm" id="myform" method="get" action="login.php" onsubmit="return
checkFields()" onreset="formReset()">
        <p align="center">用户名：
            <input type="text" name="txtUserName" size="20">
        </p>
        <p align="center">密码：
            <input type="password" name="txtPwd" size="20">
        </p>
        <p align="center"">
<input type=" submit" value="登录">
            <input type="reset" value="重置">
        </p>
    </form>
</body>

</html>

课堂练习

根据课堂所学内容，实现一个用户登录界面，要求如下：

1.假设账户为“abcdef”,密码为“123456”

2.要求输入2次密码，且2次密码都一致

3.进入到页面时会显示一个4次验证码，验证码可以按“刷新”按钮重新生成

4.账号、密码、验证码全部符合，显示登录成功！否则显示失败

5.给出具体失败信息，比如“用户名不能为空”，“用户名错误”，“两次密码不一致”，等，并给出对应的聚焦

                                          <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            text-align: center;
        }
    </style>
</head>
<body >
    <form action="" name="form" id="form" >
        <p>用户名：<input type="text" name="username" id="username"></p>
        <p>密码：<input type="password" name="password1" id="password1"></p>
        <p>确认密码：<input type="password" name="password2" id="password2"></p>
        <p>验证码：<input type="text" name="valid" id="valid">
            <input type="button" value="刷新" onclick="valid()">
        </p>
        <p>
            <input type="button" value="登录" onclick="checkFields()">
            <input type="reset" value="重置">
        </p>
        <p id="result"></p>
    </form>

    <script>
        var mes = "";
        var result = document.getElementById("result");
        function checkFields(){
            console.log("test1");
            if(form.username.value == ""){
                mes = "用户名不能为空！";
                form.username.focus();
            }
            else if (form.password1.value == ""){
                mes = "密码不能为空";
                form.password1.focus();
            }
            else if(form.username.value != "abcdef"){
                mes = "用户名错误！";
                form.username.focus();
            }
            else if(form.password1.value != "123456"){
                mes = "密码错误！";
                form.password1.focus();
            }
            else if(form.password1.value != form.password2.value){
                mes = "两次密码不一致！";
                form.password2.focus();
            }else
                mes = "恭喜你！登录成功！";
            result.innerHTML = mes;          

        }



        // function formReset(){
        //     document.getElementById("form").reset();
        // }

        // function rad(4){
        //     var result = "";
        //     for(i=0;i<parseInt(num);i++){
        //         result = result+(parseInt(Math.random()*10)).toString();
        //     }
        //     console.log("result",result);
        //     return result;
        // }

        // function check(4){
        //     if(isNaN(num)){
        //         alert("您输入的不是数字，请输入数字1");
        //         return false;
        //     }
        //     if(num<0){
        //         alert("您输入的数字小于0，请重新输入！");
        //         return false;
        //     }
        //     return true;
        // }

        // function valid(){
        //     if(check(num.value))
        //         result.innerHTML = "产生的验证码是："+rad(num.value);
        //     else
        //         result.innerHTML = "重新输入合法的数字！";
        // }


    </script>
</body>
</html>

课堂作业