你好! 这是我自己编辑的一些知识点。如果你想学习JavaScript的有关知识, 可以仔细阅读这篇文章,了解一下关于JavaScript的基本语法知识。
JavaScript的表单操作
表单操作
获取表单
获取表单元素
获取表单元素的方式,大体可以分为以下几种方式:
1.Document对象提供的定位页面元素的一系列方法
<form id="myform" name='myform' class='login' action='#'></form>
<script>
var formid=document.getElementById('myform');
var formName=document.getElementsByName('form');
var formElement=document.getElementsByTagName('form')[0];
var formClass=document.getElementsByClassName('login')[0];
var formld2=document.querySelector('#myform');
var formElement2=document.querySelectorAll('form')[0];
</script>
2.Document对象提供了forms属性
该属性用于获取当前HTML页面中所有表单的集合,返回HTML Collection对象,该对象封装了当前HTML页面中的所有表单对象。
<form id='myform' name='myform' class='login' action='#'></form>
<script>
var forms=document.forms;
console.log(forms);
</script>
上述示例代码运行结果如右图所示:
3.Document对象通过表单的name属性值获取指定表单元素
较早的浏览器还会将定义了name属性的表单保存在document对象中。
<form id='myform' name='myform' calss='login' action='#'></form>
<scrippt>
var form=document.myform;
console.log(form);
</scrippt>
注意:这种方式并不推荐,因为在新版本的浏览器中可能不再支持。
获取表单的组件元素
获取表单组件的方式,大体可以分为以下几种方式:
1.Document对象提供的定位页面元素的一系列方法
<form id='myform' name='myform' class='login' actiom='#'>
用户名:<input type='text' id='username' name='username'><br>
密码:<input type='password' id='password' name='password'><br>
<input type='submit'>
</form>
<script>
var username=document.getElementById('username');
var password=document.getElementsByName('password');
</script>
2.HTMLFormElement对象的elements属性
该属性用于获取指定表单的所有组件的集合。
<form id='myform' name='myform' class='login' action='#'>
用户名:<input type='text' id='username' name='username'><br>
密码:<input type='password' id='password' name='password'><br>
<input type='submit'>
</form>
<script>
var myform=document.forms[0];
var formElements=myform.elements;
console.log(formElement);
</script>
注意:HTMLFormElement对象提供了elements属性获取的表单组件中,不包含type为image的input元素。
表单操作
文本框的操作
input元素对应DOM中的对象是HTMLInputElement对象,而textarea元素对应DOM中的对象是HTMLTextAreaElement对象。
HTMLInputElement对象和HTMLTextAreaElement对象的共同父级对象是HTMLElement对象。所以,这两个对象在很多操作上是比较相似的。
文本内容的选择
HTMLInput对象和HTMLTextAreaElement对象都提供了select()方法,该方法用于选择当前文本框的所有文本内容。
<form id='myform' action='#'>
<input type='text' id='username' name='username' value='请输入您的用户名'>
</form>
<script>
var username=document.getElementBy('username');
username.select();
</script>
select事件
select()方法对应着select事件。也就是说,当调用select()方法时,会触发select事件。
<orm id='myform' action='#'>
<input type='text' id='username' name='username' value='请输入你的用户名'>
</orm>
<script>
var username=document.getElementById('username');
username.addEventListener('select',function(){
console.log('this input element"s select() ');
});
</script>
获取选择的文本内容
select事件只是让我们知道用户在什么时候选择了指定文本框的文本内容,但并不是让我们知道用户选择了什么文本内容。
HTML5新版本中通过新增两个属性来解决用户选择了什么文本内容的问题。
属性名称 | 描述 |
---|---|
selectionStart | 选择文本内容的开始索引值 |
selectionEnd | 选择文本内容的结束索引值 |
注意:IE8及之前版本的浏览器并不支持上述两个属性,而是提供了document.selection对象,用于保存整个HTML页面文档范围内选择的文本内容。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="text" id='username' value="请输入您的名字">
<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 res = value.substring(username.selectionStart, username.selectionEnd);
console.log(res);
});
</script>
</body>
</html>
设置部分的文本内容
HTML5新版本中提供了setSelectionRange()方法,该方法用于设置一个获取焦点的文本框中选择指定的文本内容。
inputEleent.setSelectionRange(selectionStart,selectionEnd,[optional] selectionDirection);
上述语法格式中的参数,具体说明如下:
参数名称 | 描述 |
---|---|
selectionStart | 被选中的第一个字符的位置 |
selectionEnd | 被选中的最后一个字符的下一个位置 |
selectionDirection | 一个指明选择方向的字符串。有forward、backward、none3个可选值,分别表示‘从前往后’,‘从后往前’,‘选择方向未知或不重要’ |
注意:IE8及之前版本的浏览器并不支持这个方法。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="text" name="" id="username" value="请输入您的姓名">
<input type="submit" name="" id="">
</form>
<script>
var form = document.forms[0];
var username = form.elements[0];
username.addEventListener('focus', function() {
// setSelectionRange()方法
// *作用 - 设置选择的文本内容
// *注意
// *焦点在文本内容的最后面 - select()方法(全选)
// *焦点在设置文本内容的范围内有效
username.setSelectionRange(0, 1);
});
</script>
</body>
</html>
操作剪切板
剪切板功能是经常被忽略,却很重要的功能,可以增强用户体验,方便用户交互。
事件名称 | 描述 |
---|---|
copy | 在发生复制操作时触发,对应的快捷键为Ctrl/Cmd+C |
cut | 在发生剪切操作时触发,对应的快捷键为Ctrl/Cmd+X |
paste | 在发生粘贴操作时触发,对应的快捷键为Ctrl/Cmd+V |
事件对象的clipboardData属性存储了由用户触发剪切板事件时所影响的带有MIME类型的数据。
注意:IE8及之前版本的浏览器,clipboardData属性需要通过window对象获取。
var clipboardData=event.clipboardData || wondow.clipboardData;
该属性得到的是一个DataTransfer对象,该对象提供了操作数据的常用方法,如下表所示:
方法名称 | 描述 |
---|---|
setData(in String type,in String data) | 为一个给定的类型设置数据 |
getData(in String type) | 根据指定的类型检索数据 |
clearData(in String type) | 删除与给定类型关联的数据 |
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="text" name="" id="username" value="请输入您的用户名">
<input type="text" name="" id="username2">
<input type="submit" name="" id="">
</form>
<script>
// var res;
var username = document.getElementById('username');
username.addEventListener('copy', function() {
// 得到DataTransfer对象
// *setData()方法 - 设置数据内容
var data = event.clipboardData || window.clipboardData;
console.log(data);
console.log('这是一个复制操作。');
var value = username.value;
var res = value.substring(username.selectionStart, username.selectionEnd);
console.log(res);
data.setData('text', res);
});
username.addEventListener('cut', function() {
console.log('这是一个剪切操作。');
});
var username2 = document.getElementById('username2');
username2.addEventListener('paste', function(event) {
event.preventDefault();
// 得到DataTransfer对象
// *getData()方法 - 获取数据内容
var data = event.clipboardData || window.clipboardData;
var res = data.getData('text');
if (res === '用户名') {
res = '***';
}
username2.value = res;
});
</script>
</body>
</html>
下拉列表的操作
下拉列表是由select和option元素创建的。select元素在DOM中对应的是HTMLSelectElement对象,option元素在DOM中对应的是HTMLOptionElement对象,这两个对象都提供了一些属性和方法,方便操作下拉列表。
HTMLSelectElement对象
HTMLSelectElement对象是select元素在DOM中对应的对象。
- 该对象提供的属性如下表所示:
属性名称 | 描述 |
---|---|
length | 表示当前select元素中option元素的 个数 |
multiple | 表示select元素是否允许多项选择,等价于HTML中的multiple属性 |
options | 当前select元素中option元素对象的集合 |
selectsdIndex | 代表第一个被选中的option元素。-1代表没有元素被选中 |
size | 当前select元素中可见的行数,等价于HTML中的size属性 |
- 该对象提供的方法如下表所示:
方法 | 描述 |
---|---|
add(item[,before]) | 将option元素添加到当前select元素的选项元素集合中 |
item(idx) | 放回索引值为idx的option元素。如果没有,则返回null |
remove(index) | 从当前select元素的选项元素集合中删除指定索引值的option元素 |
HTMLOptionElement对象
HTMLOptionElement对象是option元素在DOM中对应的对象。
- 该对象提供的属性如下表所示:
属性名称 | 描述 |
---|---|
index | 当前option元素在其所属的选项列表中的索引值 |
selected | 表示当前option元素是否被选中 |
text | 当前option元素的文本内容 |
value | 当前option元素的value属性值 |
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<select name="" id="city">
<option id="bj" value="bj">北京</option>
<option value="nj">南京</option>
<option value="tj">天津</option>
</select>
<select name="" id="city2" multiple size="5">
<option value="bj">北京</option>
<option value="nj">南京</option>
<option value="tj">天津</option>
</select>
</form>
<script>
// HTMLSelectElement对象
var city = document.getElementById('city');
// 属性
console.log(city.length);
console.log(city.options);
console.log(city.selectedIndex); //被选中<option>的索引值
var city2 = document.getElementById('city2');
// size属性默认值为0
console.log(city2.size);
console.log(city2.item(1));
city2.remove(2);
var bj = document.getElementById('bj');
console.log(bj.index); //0
console.log(bj.selected); //true
console.log(bj.text); //北京
console.log(bj.value); //bj
</script>
</body>
</html>
表单验证
HTML5验证API
HTML5提供了一组用于表单验证的API,目前主流浏览器对HTML5提供的验证API支持越来越好。
- 验证API的属性
属性名称 | 描述 |
---|---|
validity | 一个ValicityState对象,描述元素的验证状态 |
validity.customError | 如果元素设置了自定义错误,返回true,否则返回false |
validity.patternMismatch | 如果元素的值不匹配所设置的正则表达式,返回true,否则返回false |
validity.rangeOverflow | 如果元素的值高于所设置的最大值,返回true,否则返回false |
validity.rangeUnderflow | 如果元素的值低于所设置的最小值,返回true,否则返回false |
validity.stepMismatch | 如果元素的值不符合step属性的规则,返回true,否则返回false |
validity.tooLong | 如果元素的值超过所设置的最大长度,返回true,否则返回false |
validity.typeMismatch | 如果元素的值出现语法错误,返回true,否则返回false |
validity.valueMissing | 如果元素设置了required属性且值为空,返回true,否则返回false |
validity.valid | 如果元素的值不存在验证问题,返回true,否则返回false |
- 验证API的方法
方法 | 描述 |
---|---|
checkValidty() | 如果元素的值不存在验证问题,返回true,否则返回false |
setCustomValidity(message) | 为元素添加一个自定义的错误信息;如果设置了自定义错误信息,则该元素被认为是无效的,并显示指定的错误 |
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<!--
HTML表单组件元素的验证属性
* required - 验证当前元素不能为空
* pattern - 验证当前元素输入的内容是否与指定的正则表达式匹配
-->
<input type="text" id="username" required>
<input type="submit" name="" id="">
</form>
<script>
var form = document.forms;
var username = document.getElementById('username');
// 表单组件元素对应的对象提供了validity属性
// *得到validityState对象 - 提供了一系列的验证属性
console.log(username.validity);
console.log(username.validity.valueMissing);
username.addEventListener('blur', function() {
// valueMissing属性
// *作用 - 配合元素中required属性来使用
// *结果
// *true - 表示当前元素内容为空(错误的)
// *false - 表示当前元素内容不为空(正确的)
// console.log(username.validity.valueMissing);
if (username.validity.valueMissing) {
// console.log('请输入您的用户名');
// 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>
</html>
表单提交
submit事件
提交表单时,会触发submit事件。
<form action="" method="post">
<input type="text" name="data">
<input type="submit" value="提交">
</form>
<script>
var myform=document.forms[0];
myform.addEventListener('submit',function(){
alert('表单被提交。。。');
});
</script>
表单还提供了submit()方法用于提交表单,使用该方法时允许表单内使用任一普通按钮即可(并非提交按钮)。
<form action="" method="post">
<input type="text" name="data">
<input id="btn" type="button" value="提交">
</form>
<script>
var btn=document.getElementById('btn');
btn.addEventListener('click',function(){
var myform=document.forms[1];
myform.submit();
})
</script>
注意:使用submit()方法提交表单不会触发submit事件。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="#">
<input type="text" name="data">
<input id="btn" type="button" value="提交">
</form>
<script>
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
var myform = document.forms[0];
myform.submit(); //提交表单
})
</script>
</body>
</html>