获取表单和控件
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;}
});