JavaScript 常用的表单交互

旧城等待， 2021-09-27 15:54 243阅读 0赞

### 一、数据规范性检查 ###

**1、应用场合：**在判断输入的数据是否符合格式要求、数据的范围、符号什么的

会涉及到正则表达，来验证输入数据的格式

**2、例子：验证邮件格式是否符合要求**

*  html部分：

**验证在onblur时开始，onblur是文本框失去焦点的意思，**具体的操作就是输完数据后，点击浏览器其他空白处；获得焦点是onfocus。

在form元素上使用onsubmit事件，针对表单进行拦截，返回true才能提交

<body>
        <form id="myForm" onsubmit="return validate()">
            请输入email地址：<input type="text" name="email" id="email" value="" onblur="return validate()">
            <span id="msg"></span>
            <div><button type="submit">显示邮件</button></div>
        </form>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70][]

*  script部分：

**正则表达式的规范——一定要有开始与结束**：**/^****正则****$/.test(要验证的数据)**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 2][]

### 二、密码验证 ###

**1、思路：**前端大概是这样，我们都很熟悉的套路：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 3][]

第一次输入密码时，只检查输入是否为空，为空则发出错误提示

第二次输入密码时，检查是否为空，不为空时，检查与第一次输入的密码是否是一致

**2、html部分：**

**2、js部分：**判断是否为空部分的代码值得日后在其他地方使用。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 5][]

### 三、单选钮 radio ###

1、特点：**多个radio的id都一样！！且同一标签元素的id 和name必须一样！ **就像java中的对象数组

2、例子：选择性别，并显示出来

**document.all**("sex")将这样一组的标签元素都取出，然后用for循环对其中的各个元素的value进行判断

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>2.3 单选钮操作</title>
        <script>
            function showSex(){
                // var sex=document.getElementById("sex");
                // alert("性别是："+sex.value);
                var sex=document.all("sex")
                for (i=0;i<sex.length;i++){
                    if (sex[i].checked==true){
                        alert("被选中的是："+sex[i].value)
                    }
                } 
            }
        </script>
    </head>
    <body>
        请选择性别：<input type="radio" name="sex" id="sex" value="男" checked>男   
                    <input type="radio" name="sex" id="sex" value="女" >女<br>
        <button onclick="showSex()">显示性别</button>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 6][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 7][]

### 四、复选框 checkbox ###

1、特点：**多个**checkbox**的id都一样！！且同一标签元素的id 和name必须一样！ **

**     document.all（"id"**）取出这一组的值

**2、全选的实现，改变element.checked**

**3、例子：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>2.4 复选框操作</title>
        <script>
            function showInst(){
                // var sex=document.getElementById("sex");
                // alert("性别是："+sex.value);
                var fruit=document.all("fruit")
                var show="你选择的水果是：";
                for (i=0;i<fruit.length;i++){
                    if (fruit[i].checked){
                        show+=fruit[i].value+"、";
    
                    }
                }
                alert(show);
            }
            function selectAll() {
                var seleElement=document.getElementById("selAll");
                var fruit=document.all("fruit");
                for (i=0;i<fruit.length;i++){
                    fruit[i].checked=seleElement.checked;
                }
    
            }
    
    
        </script>
    </head>
    <body>
            请选择你喜欢的水果：<br>
            <input type="checkbox" value="苹果" name="fruit" id="fruit" >苹果<br>
            <input type="checkbox" value="香蕉" name="fruit" id="fruit" >香蕉<br>
            <input type="checkbox" value="橙子" name="fruit" id="fruit" >橙子<br>
            <input type="checkbox" value="菠萝" name="fruit" id="fruit" >菠萝<br>
            <input type="checkbox" value="葡萄" name="fruit" id="fruit" >葡萄<br>
            <br><br><br>
            <input type="checkbox" value="全选" name="selAll" id="selAll" onclick="selectAll()">全选
    
    <button onclick="showInst()">显示选择的水果</button>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 9][]

### 五、下拉列表框<select> ###

有两种方式来实现：

**方式一：this.value的方式直接向处理函数传递**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>2.5 下拉列表框(方式1)</title>
        <script>
            function showCity(city){
                alert("你的家乡是："+city);
            }
        </script>
    </head>
    <body>
        你的家乡：<select name="city" id="city" onchange="showCity(this.value)">
            <option value="北京-BJ">北京</option>
            <option value="上海-SH">上海</option>
            <option value="杭州-HZ">杭州</option>
        </select>
    
    </body>
    </html>

**方式二：getElementById的方式-推荐这种，比较习惯**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>2.5 下拉列表框(方式2)</title>
        <script>
            function showCity(){
                var cityElement=document.getElementById("city")
                alert("你的家乡是："+cityElement.value);
            }
    
        </script>
    </head>
    <body>
    你的家乡：<select name="city" id="city" onchange="showCity()">
        <option value="北京-BJ">北京</option>
        <option value="上海-SH">上海</option>
        <option value="杭州-HZ">杭州</option>
    </select>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 11][]

### 六、文本域输入<textarea> ###

**1、在输入的同时检查文字的数目是否超过上限**

**2、例子：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>2.6 文本域</title>
        <script>
            function validateNote(){
                var noteElement=document.getElementById("note");
                var msgElement=document.getElementById("noteMsg");
                // msgElement.innerHTML="输入数据长度："+noteElement.value.length;
                if (noteElement.value.length<15) {
                    msgElement.innerHTML="<font color='green'>还可以输入"+(15-noteElement.value.length)+"</font>";
                    document.getElementById("sub").disabled=false;
                }
                else{
                    msgElement.innerHTML="<font color='red'>输入文字数目超过上限！</font>";
                    document.getElementById("sub").disabled=true;
                }
    
            }
    
        </script>
    </head>
    <body>
    <form action="show.html" method="post">
        描述：<br>
        <textarea id="note" name="note" cols="50" rows="10" onkeydown="validateNote()">请在此输入...</textarea>
        <br>
        <span id="noteMsg"></span><br>
        <button type="submit" id="sub" name="sub">保存</button>
    </form>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 13][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70]: /images/20210923/0c7eebb99daf4e83aebd9510982d1ed0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 1]: /images/20210923/fbe927d0d81a4a4ebd3f467b51e3dbcc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 2]: /images/20210923/47fdb9736ffe4a27b64707d03d7589e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 3]: /images/20210923/18b8aed13010499d94080a7f453dc126.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 4]: /images/20210923/0ecc61f967c0483b89ab6c35053ab3a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 5]: /images/20210923/5050d0973241461c87fe39b63aa9756b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 6]: /images/20210923/ee3ba5ae47ba459190fe98635fe1daf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 7]: /images/20210923/939236833c9245d6ac95706543652406.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 8]: /images/20210923/c43f020303464bdba9d586af7885cb65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 9]: /images/20210923/29ee81274a9a4842a4cbef4913e7d930.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 10]: /images/20210923/9b8287eef5394d7182d4bbbbfb6f6b25.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 11]: /images/20210923/d50214ab37e54327a6b94605b861180a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 12]: /images/20210923/5ee32d95120446a3aeddce7e932e98c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTE1NTg1_size_27_color_FFFFFF_t_70 13]: /images/20210923/24218be158dc4830b1d5156f8824540d.png