DOM编程系列之表单操做
表单操做
获取表单元素
- Document对象提供一系列获取方法
- Document对象提供的forms属性 - 用于获取当前页面中全部表单元素的集合
- Document对象提供的<form>元素的name属性值
- 若是name属性值对应只有一个表单时 - 获得的就是那个<form>元素
-若是name属性值对应具备多个表单时 - 获得的是具备相同的name属性值的表单的集合
示例代码:正则表达式
<body>
<form action="#">
<!-- submit - 表示提交按钮 -->
<input type="submit">
</form>
<form name="myform" action="#">
<input type="submit">
</form>
<script>
/*
获取当前HTML页面中个全部的表单元素
* 该方法是经过表单特有属性获取HTML页面全部表单
*/
console.log(document.forms);
/*
document.表单名称 - 有些版本浏览器不支持
* 该方法是经过name属性获取指定表单
*/
console.log(document.myform);
</script>
</body>
获取表单组件元素
- Document对象提供的一系列获取方法
- <form>元素在DOM中的对象提供了elements属性 - 获得指定表单中全部组件的集合
-
经过DOM的Document对象提供的获取方法获得页面中的标签数组
- 该变量是Node类型的对象
- 该变量是Element类型的对象
- 该变量是HTMLFormElement类型的对象 - 当前获取的是<form>元素
-
结论:为何能够同时是三种类型的对象:浏览器
- 由于最上层是 Node <- 其次是 Element <- 以后是HTMLElement <- 最后是 HTMLFormElement
- <form>方法里面在DOM中就会获得HTMLFormElement对象而后在这个对象里面提供了一个属性叫elements,(对象里就是属性跟方法)elements属性就是HTMLFormElement对象里提供的属性内容.
示例代码:ui
<body>
<form action="#">
<!-- submit - 表示提交按钮 -->
<input type="submit">
</form>
<form name="myform" action="#">
<input type="submit">
</form>
<script>
/*
获取当前HTML页面中个全部的表单元素
* 该方法是经过表单特有属性获取HTML页面全部表单
*/
console.log(document.forms);
/*
document.表单名称 - 有些版本浏览器不支持
* 该方法是经过name属性获取指定表单
*/
console.log(document.myform);
</script>
</body>
文本内容的选择
- 选择文本内容 HTMLInputElement对象提供了select()方法 用来选择当前文本框的全部文本内容
示例代码:url
<body>
<form action="#">
<!-- 输入框 -->
<input type="text" id="username" value="帅哥你叫啥?">
<!-- submit - 表示提交按钮 -->
<input type="submit">
</form>
<script>
// HTMLInputElement对象
var username = document.getElementById('username');
/*
* 绑定获取焦点(focus)事件
* 失去焦点(blur)事件
*/
username.addEventListener('focus',function () {
// select()方法 - 选择当前输入框中的全部文本内容(就是全选)
username.select();
});
/*
select事件
* 只要选择对应元素的文本内容是被触发
* select()方法
*/
username.addEventListener('select',function () {
/*
HTMLInputElement对象
* selectionStart - 表示用户选中文文本内容的开始索引值
* selectionEnd - 表示用户选中文文本内容的结束索引值的下一个值
*/
console.log(username.selectionStart,username.selectionEnd);
var value = username.getAttribute('value');
// 获取用户选取的内容和对应的索引值
var result = value.substring(username.selectionStart,username.selectionEnd);
console.log(result);
});
</script>
</body>
设置文本内容
-
setSelectionRange()方法code
- 做用 - 设置选择的文本内容
-
注意:orm
- 焦点在文本内容的最后面 - select()方法(就是全选的意思)
- 焦点在设置文本内容的范围内有效
示例代码:对象
<body>
<form action="#">
<!-- 输入框 -->
<input type="text" id="username" value="写点啥吧...">
<!-- 提交按钮 -->
<input type="submit">
</form>
<script>
// 经过数组的索引值获取HTML页面中指定的form表单
var form = document.forms[0];
// 经过索引值获取指定的form元素
var username = form.elements[0];
username.addEventListener('focus',function () {
/*
setSelectionRange()方法
* 做用 - 设置选择的文本内容
* 注意:
* 焦点在文本内容的最后面 - select()方法(就是全选的意思)
* 焦点在设置文本内容的范围内有效
*/
username.setSelectionRange(0,3);
})
</script>
</body>
操做剪切板
- 剪切板主要是复制,粘贴和剪切
示例代码:索引
<body>
<form action="#">
<!-- 输入框 -->
<input type="text" id="username" value="随便写点啥吧...">
<!-- 输入框 -->
<input type="text" id="username2">
<!-- 提交按钮 -->
<input type="submit">
</form>
<script>
// var result;// 全局做用域
// 经过ID属性查找指定元素节点
var username = document.getElementById('username');
// 为指定元素绑定 'copy'(复制的意思)事件
username.addEventListener('copy',function (event) {
/*
获得DataTransfer对象
* setData()方法 - 设置数据内容
*/
// 解决浏览器兼容问题
var data = event.clipboardData || window.clipboardData;
console.log(data);
console.log('如今是复制操做...');
var value = username.value;
// 获取用户操做时从开始到结束的索引值对应的内容
var result = value.substring(username.selectionStart,username.selectionEnd);
console.log(result);
// 至关于键盘上的 Ctrl + C 的效果
data.setData('text',result);
});
// 为指定元素绑定 'cut'(就是剪切的意思)事件
username.addEventListener('cut',function () {
console.log('如今是剪切操做...');
});
// 经过ID属性获取指定元素节点
var username2 = document.getElementById('username2');
// 为指定元素绑定 'paste'(粘贴的意思)事件
username2.addEventListener('paste',function (event) {
// 阻止默认事件
event.preventDefault();
/*
获得DataTransfer对象
* getData()方法 - 获取数据内容
*/
var data = event.clipboardData || window.clipboardData;
var result = data.getData('text');
console.log(result);
if (result ==='写点啥吧') {
result = '啦啦啦';
}
username2.value = result;
});
</script>
</body>
下拉列表操做
示例代码:事件
<body>
<form action="#">
<select id="city">
<option id="jms" value="jms">佳木斯</option>
<option value="heb">哈尔滨</option>
<option value="hlj">黑龙江</option>
</select>
<select id="city2" multiple size="3">
<option value="jms">佳木斯</option>
<option value="heb">哈尔滨</option>
<option value="hlj">黑龙江</option>
</select>
</form>
<script>
//HTMLSelectElement对象
var city = document.getElementById('city');
//
console.log(city.length);// 调用结果为 3 - 表示列表项目的个数
console.log(city.options);// 调用结果为 HTMLOptionsCollection(3) - 表示全部列表项目的类数组集合
console.log(city.selectedIndex);// 调用结果为 0 - 表示选中项的索引值
var city2 = document.getElementById('city2');
// size属性默认值为 0
console.log(city2.size);
// 经过索引值找到指定的项目
console.log(city2.item(1));
// 经过索引值删除指定的项目
city2.remove(2);
var jms = document.getElementById('jms');
console.log(jms.index);// 调用结果为 0 - 表示当前元素在其属性的选项列表中的索引值
console.log(jms.selected);// 调用结果为 true - 表示当前元素是否被选中
console.log(jms.text);// 调用结果为 佳木斯 - 表示当前元素的文本内容
console.log(jms.value);// 调用结果为 jms - 表示当前元素的value属性值
</script>
</body>
HTML5表单验证
- 注意: HTML5提供了一些表单验证的属性和方法,可是有浏览器兼容问题
示例代码:
<body>
<form action="#">
<!--
HTML表单组件元素的验证属性
* required - 验证当前元素不能为空
* pattern - 验证当前元素输入的内容是否与指定的正则表达式匹配
-->
<input type="text" id="username" required pattern="^[0-9a-zA-Z]{6,12}$">
<input type="submit">
</form>
<script>
var username = document.getElementById('username');
/*
表单组件元素对应的对象提供了validity属性
* 获得ValidityState对象 - 提供了一系列的验证属性
*/
console.log(username.validity);
// console.log(username.validity.valueMissing);
username.addEventListener('blur',function(){
/*
valueMissing属性
* 做用 - 配合元素中required属性来使用
* 结果
* true - 表示当前元素内容为空(错误的)
* false - 表示当前元素内容不为空(正确的)
*/
if (username.validity.valueMissing) {
/*
setCustomValidity(message)方法
* 做用 - 替换浏览器默认的错误提示信息
* 注意 - 若是输入正确，必须将错误提示信息设置为空
*/
username.setCustomValidity('用户名不能为空');
} else {
username.setCustomValidity('');
}
/*
patternMismatch属性
* 做用 - 配合元素中pattern属性来使用
*/
if (username.validity.patternMismatch) {
username.setCustomValidity('用户名格式错误');
} else {
username.setCustomValidity('');
}
/*
* rangeOverflow - 配合元素中max属性来使用
* rangeUnderflow - 配合元素中min属性来使用
* stepMismatch - 配合元素中step属性来使用
* tooLong - 配合元素中maxLength属性来使用
* tooShort - 配合元素中minLength属性来使用
* typeMismatch - 配合<input type="url">等元素来使用
* customError - 配合setCustomValidity()方法来使用
* valid - 验证当前元素是否验证经过
* true - 表示当前元素验证经过
* false - 表示当前元素验证经过
*/
});
</script>
</body>
表单验证
示例代码:
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
var username = document.getElementById('username');
username.addEventListener('blur',function(){
// 1.获取当前元素的value属性值
var value = username.value;
// 2.根据获取的值进行判断
if (value === '' || value === undefined || value === null) {
console.log('请输入你的用户名');
}
});
</script>
</body>
表单提交
submit事件
- 表单提交就是DOM中给了两样东西
- 是submit事件在表单提交时会触发
- 是在<form>元素对应的DOM对象里面提供了submit()方法能够用于提交表单.
- 好处就是去掉表单自己的提交机制经过submit方法的方式进行提交(灵活性比较大想怎么用均可以)
示例代码:
<body>
<form action="#">
<input type="text" id="username">
<input type="submit">
</form>
<script>
/* 经过索引值获取到指定的元素 */
var form = document.forms[0];
/* 为获取到的元素绑定 'submit'(按钮的意思) 事件 */
form.addEventListener('submit',function(event){
console.log('当前表单已被提交...');
// 阻止默认事件
event.preventDefault();
});
</script>
</body>
submit()方法
示例代码:
<body>
<form action="#">
<input type="text" id="username">
<input id="btn" type="button" value="提交">
</form>
<script>
/* 经过ID属性获取指定元素节点 */
var btn = document.getElementById('btn');
/* 为获取到的元素节点绑定 'click'(点击的意思)事件 */
btn.addEventListener('click',function(){
var form = document.forms[0];
form.submit();// 提交表单
});
</script>
</body>
相关文章
- 1. JavaScript 之 DOM [ 表单操做 ]
- 2. 【JavaScript】DOM之表单操做
- 3. DOM编程系列之样式操做我的分享
- 4. MyBatis 系列教程2-单表操做
- 5. DOM编程系列之事件
- 6. Django系列（三）：单表操做
- 7. JavaScript Dom 编程艺术学习笔记之DOM操做
- 8. jQuery 源码系列（十五）DOM 操做
- 9. javascript之DOM操做
- 10. jQuery之DOM操做
- 更多相关文章...
- • ionic 列表操作 - ionic 教程
- • XML DOM 节点列表 - XML DOM 教程
- • Docker容器实战(七) - 容器眼光下的文件系统
- • Java 8 Stream 教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
