【JavaScript】笔记form表单

获取表单和控件

document的方法/属性	说明
getElement...或querySelect...方法
forms	集合对象（所有表单）

表单对象.elements   返回所有控件组成 的集合对象

例：

<form name="login">
<input name="user"></form>
let loginForm=document.forms[0];//["login"]
let form=document.elements;//所有控件
let username=elements.user;//input所有控件

获取表单和控件的简洁方式

获取表单：document.表单name属性值

获取控件：表单对象.控件name或id属性值

<form name="login">
<input type="text" name="user" id="user1">
<input type="tel" name="tel" id="tel">
</form>

let loginForm=document.login;
let user=loginForm.user;
let tel=loginForm.tel;

控件属性，方法，事件

控件常用属性，方法

适用于大部分控件

属性/方法	说明
type	控件的类型，用于input元素
value	控件的值
readonly	值为true控件只读，能获取焦点但不能编辑
disabled	值为true控件被禁用，不能获取焦点和编辑
select()	选中type=text或textarea元素里的所有内容
focus()	使控件获取焦点，触发focus事件

表单控件常用事件

事件	触发
input	当input，select
change	元素的值被改变且提交时，用于select，radio，checkbox控件值改变时

单选与复选框属性

checked属性：判断单选或者复选框是否被选中。读/写，true选中，false反之

<form name="login">
<input type="checkbox" name="hobby">
</form>
document.login.hobby.onchange=function(e){
if(e.target.checked){}
}

select控件属性

属性	方法
value	获取select控件的选项值
options	所有option元素的集合
SelectedIndex	当前选中选项的索引数
Selected	判断列表框中选项是否被选中

<select name="my"><option></option></select>
my.value;
my.options[my.selectedIndex].value;
my.options[my.selectedIndex].text;

表单前端验证

验证事件

用于验证的事件

事件	说明
blur	控件失去焦点时验证
change	控件value值改变时验证
input	文本框框或者textarea值改变时
keyup	验证文本框，文本域中键的输入
submit	表单被提交到服务器时

表单提交时验证表单

form.addEventListener('submit',e=>{
if(form.username.value.length<8){
tipMessage.textContet='长度错误';
e.preventDefault();
return false;}
});