章节17.表单处理及错误处理与调试

前言

我们在上学期做网页开发的时候，只是在留言板那个部分简单讲了一下表单，我们本章节讲如何使用js处理我们的表单，我们顺带一起把表单基础内容一起讲解，方便大家理解。在早期，没有js的时候，我们的提交数据都是由服务器端处理的，对表单数据的过滤、验证合法性等等，这样会导致服务器压力很大，特别是用户量大的时候，这个时候就出现了我们的js验证表单，从而分担服务器处理表单的压力。

# Ⅰ、表单基础知识

在 HTML 中，表单是由<form>元素来表示的，在js中，表单对应的则是HTMLFormElement 类型。

# 1、获取表单form对象的方法

   <form id="myForm" name="yourForm"></form>
   // window.addEventListener('load',function(){},false);
   //表单基础

   //1、获取form对象的方法
   //id获取
   //let fm = document.getElementById('myForm');
   //console.log(fm);

   // form元素获取
   // let fm = document.getElementsByTagName('form')[0];
   // console.log(fm);

   // querySelector系列
   // let fm = document.querySelector('form');
   // fm = document.querySelectorAll('form')[0];
   // fm = document.querySelector('#myForm');
   // console.log(fm);

   //HTML DOM方式获取，我们在章节15讲过用HTML DOM方式操作表格
   console.log(document);
   let fm = document.forms[0];//HTML DOM方式通过0下标获取
   fm = document.forms['myForm'];//HTML DOM方式通过id下标获取
   fm = document.forms['yourForm'];//HTML DOM方式通过name下标获取
   console.log(fm);

# 2、提交表单

# ① 默认提交form表单中，按钮type="submit"

<form id="myForm" name="yourForm" class="my-5 flex justify-center">
    账号：<input type="text" name="user" value="abc" />
    <input type="button" value="输入框类型换button提交">
    <input type="submit" value="输入框类型换submit提交">
    <button>提交</button>
</form>
//我们点击提交按钮，发现浏览器地址栏多了 ?user=abc  说明在本页提交的
//而且带?,意思是默认以get方式提交的，关于提交方式get/post，我们后面会讲
//当然如果你把按钮类型，由 type="submit" 改成 type="button" 就不能提交了

# ② js中表单提交，及阻止提交

//传统提交（脚本模型）
let fm = document.getElementById('myForm');
// fm.onsubmit = function(){}  

//现代事件绑定提交
// fm.addEventListener('submit',function(){},false);

//阻止提交（阻止默认行为）
fm.addEventListener('submit',function(e){
   e.preventDefault();
},false);

//思考：
//1. submit事件，为什么要用form对象来触发呢？为什么不是input中的submit按钮触发呢？
<input id="sub" type="submit" value="提交">
let sub = document.getElementById('sub');
sub.addEventListener('submit',function(e){
    e.preventDefault();//发现阻止不了，可以提交
},false);
//注意了：
//1. 把submit提交事件注册到input中的submit按钮，是无法触发submit提交事件的；
//2. 必须把submit事件绑定到form表单对象上，才可以触发submit事件
//3. 因为form元素是看不见的东西，所以触发submit提交事件的流程是：点击input中的submit按钮而已

# ③ 让没有提交功能的按钮（其它元素），完成表单提交，使用的是form.submit()方法

 let sub = document.getElementById('sub');
 sub.addEventListener('submit',function(e){
     e.preventDefault();//发现阻止不了，可以提交
     alert(123);//弹窗也无法执行
 },false);

//虽然说提交按钮无法执行submit提交事件，需要在form上执行，但是按钮有点击事件
let sub = document.getElementById('sub');
let fm = document.getElementById('myForm');
sub.addEventListener('click',function(e){
    //alert(123);
    fm.submit();//让form执行submit方法提交数据
},false);

//也可以是其他元素
<strong id="strongsub">我是提交文字</strong>
let strongsub = document.getElementById('strongsub');
let fm = document.getElementById('myForm');
strongsub.addEventListener('click',function(){
    fm.submit();
},false);

strongsub.onclick = function(){
    fm.submit();
}

# ④ 实现使用键盘 CTRL + enter(回车键)提交数据

//判断是否按下了ctrl键，前面事件对象已经讲了e.ctrlKey为true就是按下了
//判断是否按下了回车键，事件对象中的键码 e.keyCode , 回车键的键码是13
//对页面数据进行提交，以document作为事件绑定对象
document.addEventListener('keydown',function(e){
    //console.log('是否按下ctrl键', e.ctrlKey);//是否按下ctrl键
    //console.log('键码', e.keyCode);//回车键键码 13

    if(e.ctrlKey && e.keyCode == 13){
        console.log('用户按下了ctrl键和回车键');
        let fm = document.getElementById('myForm');
        fm.submit();
    }
},false);

注意：在表单中尽量避免使用 name="submit"或 id="submit"等命名，这会和 submit()方法发生冲突导致无法提交。

# ⑤ 预防表单数据重复提交

提交数据最大的问题就是重复提交表单。因为各种原因(比如你当时的网络非常差)，当一条数据提交到服务器的时候会出现延迟等长时间没反映，导致用户不停的点击提交，从而使得重复提交了很多相同的请求，会造成错误、或写入数据库多条相同信息。我们可以来模拟一下：

let fm = document.getElementById('myForm');
fm.addEventListener('submit',function(e){
   e.preventDefault();
   console.log('提交数据');

   //模拟延迟
   setTimeout(function(){
      fm.submit();
   }, 3000);

},false);

//为了防止用户不停的提交数据，有两种解决方案：
//第一种就是提交之后，立刻禁用点击按钮，让点击按钮不在具有提交功能
let fm = document.getElementById('myForm');
fm.addEventListener('submit',function(e){
   e.preventDefault();
   console.log('提交数据');
   //第一次提交后讲提交按钮禁用
   // document.getElementById('sub').disabled = 'disabled';
   //document.getElementById('sub').setAttribute('disabled','disabled');

   //模拟延迟
   setTimeout(function(){
      fm.submit();
      document.getElementById('sub').removeAttribute('disabled');//恢复按钮可用
   }, 3000);

},false);
//但第一种方法，只限于通过按钮进行提交的，在其他元素上或者键盘组合方式，又不行了

//第二种方法：提交之后取消后续的表单提交操作(状态标记法)
let fm = document.getElementById('myForm');
let flag = false;
fm.addEventListener('submit',function(e){
   e.preventDefault();

   if(flag == true) return;
   flag = true;//表示我已经提交过一次了

   console.log('提交数据');
   
   //模拟延迟
    setTimeout(function(){
        fm.submit();
        flag = false;
    }, 3000);

},false);

# ⑥ 表单重置：按钮重置type="reset"，js重置 form.reset()方法

//按钮重置
<input type="reset" value="重置" />

//js重置
<strong id="strong_reset">重置</strong>
let strong_reset = document.getElementById('strong_reset');
strong_reset.onclick = function(){
    let fm = document.getElementById('myForm');
    fm.reset();
}

# ⑦ 使用HTML DOM获取表单控件元素

# 1. elements属性获取表单控件元素集合

let fm = document.getElementById('myForm');
console.log(fm);
console.log(fm.elements);//HTMLFormControlsCollection 表单控件元素集合
//表单控件元素：input, textarea,select,checkbox,submit等
//获取表单控件数量
console.log(fm.elements.length);//非表单控件元素不会计算在内

console.log(fm.elements[0]);
console.log(fm.elements['username']);
console.log(fm.elements[0].name);


console.log(fm.elements[1]);
console.log(fm.elements['sub']);

# 2.多个表单字段都使用同一个 name，如单选框多选框

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

//集合列表
let fm = document.getElementById('myForm');
console.log(fm.elements);
console.log(fm.elements['sex']);
console.log(fm.elements['sex'][0]);
console.log(fm.elements['sex'][0].checked);
console.log(fm.elements['sex'][1].checked);

# 3.常用属性

let fm = document.getElementById('myForm');
console.log(fm.elements[0]);
console.log(fm.elements[0].value); //获取和设置 value
console.log(fm.elements[0].form == fm); //查看当前字段所属表单
console.log(fm.elements[0].disabled = true); //禁用当前字段
console.log(fm.elements[0].type);//text
// fm.elements[0].type = 'checkbox'; //修改字段类型，极不推荐

# 4.表单共有字段方法：foucs()：将光标焦点放在控件上，blur()：讲焦点移开控件

let fm = document.getElementById('myForm');
fm.elements[0].focus();
// fm.elements[0].blur();

# 5.表单共有的字段事件：blur(当字段失去焦点时触发)，change（对于<input>和<textarea>元素，在改变 value 并失去焦点时触发；对于<select>元素，在改变选项时触发）,focus（当前字段获取焦点时触发）

let fm = document.getElementById('myForm');
let inputField = fm.elements[0];
//传统事件:onfocus
inputField.onfocus = function(){
    console.log('光标在账户输入框触发');
}
//现代事件绑定
inputField.addEventListener('focus',function(){
    console.log('光标在账户输入框触发');
},false);
inputField.addEventListener('blur',function(){
    console.log('光标离开账户输入框触发');
},false);
inputField.addEventListener('change',function(){
    console.log('输入内容改变，且失去光标触发');
},false);
inputField.addEventListener('input',function(){
    console.log('输入内容改变触发',this.value);
},false);

# Ⅱ、表单中的文本框

在 HTML 中，有两种方式来表现文本框：一种是单行文本框<input type="text">，一种是多行文本框<textarea>。虽然<input>在字面上有 value 值，而<textarea>却没有，但都可以通过 value 获取他们的值。
<textarea>多行的文本输入控件介绍

# ① input.value 和 textarea.value 获取输入的内容，defaultValue获取默认设置的value值

账号：<input type="text" name="username" value="abc">
<textarea name="content"  cols="30" rows="10">我是多行文本</textarea>

let fm = document.getElementById('myForm');
let inputField = fm.elements['username'];
let textareaField = fm.elements['content'];
console.log(inputField.value);
console.log(textareaField.value);
//说明：
//1.在html中，input有value属性，textarea没有value属性
//2.在js中，input和textarea都有value属性

//还有一个属性对应的是 defaultValue，可以得到原本的 value 值，不会因为值的改变而变化
let fm = document.getElementById('myForm');
let inputField = fm.elements['username'];
inputField.oninput = function(){
    console.log('value',this.value);
    console.log('defaultValue',this.defaultValue);
}

# ② 选择文本：使用 select()方法，可以将文本框里的文本选中，并且将焦点设置到文本框中

let fm = document.getElementById('myForm');
let inputField = fm.elements['username'];
inputField.select();

# ③ 选择部分文本：setSelectionRange()方法，这个方法接受两个参数：索引和长度。

let fm = document.getElementById('myForm');
let inputField = fm.elements['username'];
inputField.setSelectionRange(0,2); //从索引0位置开始，选到索引第二个位置，按键盘可以直接修改选定内容
// inputField.setSelectionRange(1,2); //从索引1位置开始，选到索引第二个位置
// inputField.setSelectionRange(0,inputField.value.length);//全部选定
inputField.focus(); //焦点移入

# ④ select 事件，选中文本框文本后触发

let fm = document.getElementById('myForm');
let inputField = fm.elements['username'];
//传统（脚本模型）
inputField.onselect = function(){
    console.log('你选择了内容')
}
//现代事件绑定
inputField.addEventListener('select',function(){
    console.log('你选择了内容')
},false);

# ⑤ 获取选择的文本，两个属性：selectionStart 和 selectionEnd

let fm = document.getElementById('myForm');
let inputField = fm.elements['username'];
//现代事件绑定
inputField.addEventListener('select',function(){
    console.log('你选择了内容')
    console.log('全部文本内容',this.value)
    console.log('selectionStart',this.selectionStart);
    console.log('selectionEnd',this.selectionEnd);

    //获取选择的文本字符串的substring方法
    console.log('选择的文本',this.value.substring(this.selectionStart,this.selectionEnd));
},false);

# ⑥ 文本过滤输入（表单验证，文本验证，输入框验证）

实际开发中，用户在输入文本的时候，必须按照指定字符输入，比如用户注册的时候，输入手机号，手机号一般11位，且是数字，你不能让用户输入中文英文，这就需要进行文本过滤。

# Ⅰ、表单基础知识

# 1、获取表单form对象的方法

# 2、提交表单

# ① 默认提交form表单中，按钮type="submit"

# ② js中表单提交，及阻止提交

# ③ 让没有提交功能的按钮（其它元素），完成表单提交，使用的是form.submit()方法

# ④ 实现使用键盘 CTRL + enter(回车键)提交数据

# ⑤ 预防表单数据重复提交

# ⑥ 表单重置：按钮重置type="reset"，js重置 form.reset()方法

# ⑦ 使用HTML DOM获取表单控件元素

# 1. elements属性获取表单控件元素集合

# 2.多个表单字段都使用同一个 name，如单选框多选框

# 3.常用属性

# 4.表单共有字段方法：foucs()：将光标焦点放在控件上，blur()：讲焦点移开控件

# 5.表单共有的字段事件：blur(当字段失去焦点时触发)，change（对于<input>和<textarea>元素，在改变 value 并失去焦点时触发；对于<select>元素，在改变选项时触发）,focus（当前字段获取焦点时触发）

# Ⅱ、表单中的文本框

# ① input.value 和 textarea.value 获取输入的内容，defaultValue获取默认设置的value值

# ② 选择文本：使用 select()方法，可以将文本框里的文本选中，并且将焦点设置到文本框中

# ③ 选择部分文本：setSelectionRange()方法，这个方法接受两个参数：索引和长度。

# ④ select 事件，选中文本框文本后触发

# ⑤ 获取选择的文本，两个属性：selectionStart 和 selectionEnd

# ⑥ 文本过滤输入（表单验证，文本验证，输入框验证）

# ⑦ 剪切事件：cut，复制事件：copy，粘贴事件：paste，禁用输入法

# ⑧ 利用正则表达式将用户输入的非数字字符替换成空，只留下数字

# ⑨ 输入框自动切换焦点到下一个输入框（类似Tab键），maxlength属性可输入的最大字符长度

# Ⅲ、表单中的下拉列表（选择框）

# ① 获取下拉列表对象

# ② 下拉列表多选属性 multiple="multiple"(按住键盘CTRL键进行多选)，size显示的行数

# ③ 属性 options（下拉选项的集合）

# ④ 选择选项：选择一项的使用selectedIndex属性，监听的是下拉列表的change事件

# ⑤ 下拉列表动态添加选择项: 使用Option 构造函数，add方法添加选项

# ⑥ 下拉列表动态移除选择项：三种方式（removeChild移除、remove()方法移除和 null 移除）

# ⑦ 下拉列表动态移动选择项（两个下拉列表选项移动）

# ⑧ 下拉列表动态排序选择项（选项排序）：属性index

# ⑨ 获取单选框或者多选框选择的值: 判断checked属性是否为真判断选中的项，defaultChecked判断项目原本设置的默认值

# IV、错误与调试

# ① 浏览器错误报告

# ② 错误处理：try-catch 语句，finally 子句

# ③ 错误类型

# ④ try-catch使用场景

# ⑤ 抛出错误

# ⑥ 错误事件error：处理DOM对象产生错误时候使用，比如加载图片失败

# ⑦ 错误处理策略

# 1.类型转换错误

# 2.数据类型错误

# 3.通信错误

# ⑧ 调试技术和调试工具

# 课程其它章节