1.表单的基础知识:
获取表单有三种形式
// 通过dom
var form1 = document.getElementById('form1');
//通过forms集合
var form11 = document.forms[0];
//通过form表单的name
var form111 = document.form1;
console.log((form1 == form11));//true
console.log(form1 == form111) // true
表单元素有自己独特的元素和方法
提交交单可以使用 或者 再提交表单的时候会触发submit事件,我们可以通过preventDefault() 来组织submit提交
重置表单可以使用 或者, 会把表单恢复到页面刚加载的样子, 会触发reset事件
获取表单元素可以使用form.elements属性
var form1 = document.getElementById('form1');
var text1 = form1.elements[0];
var text2 = form1.elements['text2']
console.log(text1);
console.log(text2);
共有的表单字段属性
focus()方法可以是表单元素获取焦点, blur()可以取消焦点 , 表单字段事件中 除了focus或者blur外, 还有change事件, 当input失去焦点,切value值改变时触发, select 选项改变时触发
2.文本框脚本:
用户输入的内容都会保存在input的value属性中, 更改value同时也会改变input显示的文本
select()方法, 调用select方法的文本框会获得焦点, 同时会选择文本框的全部文本, setSelectionRange(), 选择文本框的部分文本, 参数1 起始索引 参数2 结束索引的后一个位置, 如果要获取被选中的文本 可以使用 selectionStart (起始) 和selectionEnd(结束), 配合截取字符串.
剪切板事件: 访问clipboardData对象来获取剪切板的数据, cut(剪切事件), copy(复制), paste(粘贴), 这三个事件都是剪切板事件, 在这三个事件使用perventDefault() 可以阻止 剪切, 复制, 粘贴. clipboardData有三个方法 用来获取设置(setData), 获取(getData), 清空(clear数据), setData(), 参数1: 类型 如 text, 参数2: 添加的文本, getData(). 参数1 类型
text2.onpaste = function(event){
console.log(event.clipboardData.getData('text'))
}
text2.oncopy = function(event){
event.clipboardData.setData('text','ppap')
console.log(event.clipboardData.getData('text'));
}
h5给标签设置了一些字段, 用来自动验证, required字段 表示在表单提交时 不能为空, type类型 可以设置为 email,number, 便可自行检测邮箱或数字等,对于数值类型的标签, 可以设置 min max 最小最大数, pattern 传入正则表达式, 用来检测文本, 是否符合正则, checkValidity() 用来检测文本是否符合日期 如果符合返回true 并接着往下执行.
text2.onfocus = function(){
// console.log(this.validity);
if(text1.checkValidity()){
console.log('ok')
}else{
console.log('nono')
}
}
validity属性, 用来告诉你, 那些字段合格,那些不合格,这个对象会详细列出
ValidityState {valueMissing: false, typeMismatch: false, patternMismatch: false, tooLong: false, tooShort: false, …}
novalidity 字段, 告诉表单不进行验证.
3.选择框脚本:
选择框由select 和option 组成的, select 提供了一些属性和方法 add() 插入 option 参数1: 插入的option 参数2 插入位置在相关项之前,为空插入最后. options 所有项集合, remove(index) 根据索引移除项 , selectedIndex 选中项索引, option 提供了 index 项在集合中的索引, text 文本, value 值 , selected 是否被选中 .
var ss = document.getElementById('ss');
//被选中项索引 更改selectedIndex 可以改变被选中的项
console.log(ss.selectedIndex); //0
ss.selectedIndex = 1;
// 创建option text代表文本值 value代表元素值
// select.add 方法用于添加option
var op = document.createElement('option');
op.text = '添加的';
op.value = 23;
ss.add(op)
//移除当前被选中的索引 使用null也可以移除
ss.remove(ss.selectedIndex)
ss.options[0] = null;