14表单操作
表单操作
获取表单
获取表单元素
通过常规方式
Document对象方式。
document.getElementById('form')等。通过Document的属性
formsdocument.forms返回结果为
HTMLCollection。通过表单的name名字。
此方法不推荐。因为在新版本的浏览器中可能不再支持。
如果返回结果为一个时类型为对象，多个时是集合。
获取表单组件元素
常规方式
Document对象方式。
document.getElementById('form_input')等。通过表单元素的属性
elements1
2var f = document.forms[0]
console.log(f.elements)
表单操作
文本框的操作
选择当前文本框的所有内容
1
2
3
4
5
6
7<form action="#" id="myform">
<input type="text" id="username" name="username" value="请输入用户名">
</form>
<script>
var username = document.getElementById('username')
username.select()
</script>
select事件简单来说就是当被选择时的触发的事件
1
2
3
4
5
6
7
8
9<form action="#" id="myform">
<input type="text" id="username" name="username" value="请输入用户名">
</form>
<script>
var username = document.getElementById('username')
username.addEventListener('select', function () {
console.log('select')
})
</script>获取选择的文本内容
selectionStart选择文本内容的开始索引值
selectionEnd选择文本内容的结束索引值
1
2
3
4
5
6
7
8
9<form action="#" id="myform">
<input type="text" id="username" name="username" value="请输入用户名">
</form>
<script>
var username = document.getElementById('username')
username.addEventListener('select', function () {
console.log(username.selectionStart, username.selectionEnd, username.value.slice(username.selectionStart, username.selectionEnd))
})
</script>设置文本内容
setSelectionRange(start,end,[opt])参数分别为开始位置，结束位置和方向（
forward、backward、none，分别表示从前往后，从后往前，选择方向位置或不重要）。
1
2
3
4
5
6
7
8
9<form action="#" id="myform">
<input type="text" id="username" name="username" value="请输入用户名">
</form>
<script>
var username = document.getElementById('username')
username.addEventListener('click', function () {
username.setSelectionRange(1, 2)
})
</script>操作剪切板
操作剪切板的事件为
copy、cut、paste。分别为复制、剪切、粘贴。复制操作示例
1
2
3username1.addEventListener('copy', function () {
console.log('这是一个复制操作。。。。')
})剪切操作示例
1
2
3username1.addEventListener('cut', function () {
console.log('这是一个剪切操作')
})粘贴操作示例
1
2
3
4
5
6
7
8
9
10var username2 = document.getElementById('username2')
username2.addEventListener('paste', function (event) {
// 阻止默认行为
event.preventDefault()
// 为了测试效果，将用户名替换成***
if (result === '用户名') {
result = '***'
}
username2.value = result
})
通过全局变量方式获取剪切板内容方式
也就是在全局作用域定义一个变量，这个变量用于存储每次用户复制后的内容。
https://antmoe.gitee.io/project/2020/05/11/01_操作剪切板.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" id="username1" value="请输入你的用户名">
<input type="text" id="username2">
<input type="submit" value="">
</form>
<script>
var username1 = document.getElementById('username1')
// 全局变量方式
var result
// copy操作
username1.addEventListener('copy', function () {
console.log('这是一个复制操作。。。。')
var value = username1.value
result = value.substring(username1.selectionStart, username1.selectionEnd)
// console.log(result)
})
// cut操作
username1.addEventListener('cut', function () {
console.log('这是一个剪切操作')
})
var username2 = document.getElementById('username2')
username2.addEventListener('paste', function (event) {
event.preventDefault()
if (result === '用户名') {
result = '***'
}
username2.value = result
})
</script>
</body>
</html>通过DataTransfer对象设置.
DataTransfer对象通过事件获取
存在兼容性问题,因此使用或操作符.
1
2
3username2.addEventListener('paste', function (event) {
var data = event.clipboardData || window.clipboardData
})DataTransfer提供的方法
为一个给定的类型设置数据
setData(in String type,in String data)1
2var result = '666'
data.setData('text', result)根据指定的类型检索数据
getData(in String type)1
data.getData('text')
删除与给定类型关联的数据
clearData([in String type])
https://antmoe.gitee.io/project/2020/05/11/02_操作剪切板.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="">
<input type="text" id="username1" value="请输入你的用户名">
<input type="text" id="username2">
<input type="submit" value="">
</form>
<script>
var username1 = document.getElementById('username1')
// copy操作
username1.addEventListener('copy', function (event) {
var data = event.clipboardData || window.clipboardData
console.log(data)
console.log('这是一个复制操作。。。。')
var value = username1.value
result = value.substring(username1.selectionStart, username1.selectionEnd)
console.log(result)
data.setData('text', result)
})
var username2 = document.getElementById('username2')
username2.addEventListener('paste', function (event) {
var data = event.clipboardData || window.clipboardData
var result = data.getData('text')
event.preventDefault()
if (result === '用户名') {
result = '***'
}
username2.value = result
})
</script>
</body>
</html>下拉列表操作
HTMLSelectElement对象1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27// 属性
// HTMLSelectElement
var city = document.getElementById('city')
// <option>的元素个数
console.log(city.length)
// <option>的元素
console.log(city.options)
// 代表第一个被选中的<option>元素 -1表示没有元素被选中
console.log(city.selectedIndex) //北苑中<option>的索引值
var city2 = document.getElementById('city2')
// size属性默认为0 等价于HTML的size属性
console.log(city2.size)
// 是否为多选框
console.log(city2.multiple)
//方法
// 返回索引值为1的<option>元素.
console.log(city2.item(1))
// 删除索引为2的元素
city2.remove(2)
// 添加一个元素,在索引0之前
var o = document.createElement('option')
o.value = '666'
o.textContent = '666'
city2.add(o, 0)HTMLOptionElement对象1
2
3
4
5
6
7
8
9
10// HTMLOptionElement对象提供的属性
var bj = document.getElementById('bj')
// 当前元素在其所属的选项列表中的索引值
console.log(bj.index)
// 当前<option>元素是否被选中
console.log(bj.selected)
// 当前<option>元素的文本内容
console.log(bj.text)
// 当前<option>元素的value属性值
console.log(bj.value)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<html lang="en">
<head>
<meta charset="UTF-8">
<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')
// 属性
// <option>的元素个数
console.log(city.length)
// <option>的元素
console.log(city.options)
// 代表第一个被选中的<option>元素 -1表示没有元素被选中
console.log(city.selectedIndex) //北苑中<option>的索引值
var city2 = document.getElementById('city2')
// size属性默认为0 等价于HTML的size属性
console.log(city2.size)
// 是否为多选框
console.log(city2.multiple)
// 返回索引值为1的<option>元素.
console.log(city2.item(1))
// 删除索引为2的元素
city2.remove(2)
// 添加一个元素,在索引0之前
var o = document.createElement('option')
o.value = '666'
o.textContent = '666'
city2.add(o, 0)
// HTMLOptionElement对象提供的属性
var bj = document.getElementById('bj')
// 当前元素在其所属的选项列表中的索引值
console.log(bj.index)
// 当前<option>元素是否被选中
console.log(bj.selected)
// 当前<option>元素的文本内容
console.log(bj.text)
// 当前<option>元素的value属性值
console.log(bj.value)
</script>
</body>
</html>
表单验证
HTML5验证API属性
以下方法通过validity调用.username.validity.valueMissing
| 名称 | 类型 | 描述 |
|---|---|---|
customError | Boolean | 该元素的自定义有效性消息已经通过调用元素的setCustomValidity() 方法设置成为一个非空字符串. |
patternMismatch | Boolean | 该元素的值与指定的pattern属性不匹配. |
rangeOverflow | Boolean | 该元素的值大于指定的 max属性. |
rangeUnderflow | Boolean | 该元素的值小于指定的 min属性. |
stepMismatch | Boolean | 该元素的值不符合由step属性指定的规则. |
tooLong | Boolean | 该元素的值的长度超过了HTMLInputElement 或者 HTMLTextAreaElement 对象指定的maxlength属性中的值. 注意:在Gecko中,该属性永远不会为 true,因为浏览器会阻止元素的值的长度超过maxlength. |
typeMismatch | Boolean | 该元素的值不符合元素类型所要求的格式(当type 是 email 或者 url时). |
valid | Boolean | 其他的约束验证条件都不为true. |
valueMissing | Boolean | 该元素有 required 属性,但却没有值. |
HTML5验证API方法
| 方法名 | 描述 |
|---|---|
checkValidity() | 如果元素的值不存在验证问题，返回true，否则返回 false |
setCustomValidity(message) | 为元素添加一个自定义的错误消息：如果设置了自定义错误消息，则该元素被认是无效的，并显示指定的错误 |
判断输入是否为空
1
2
3
4
5username.addEventListener('blur', function () {
if (username.validity.valueMissing) {
console.log('用户名为空了')
}
})设置错误提示
1
2
3
4
5
6
7username.addEventListener('blur', function () {
if (username.validity.valueMissing) {
username.setCustomValidity('用户名不能为空')
}else {
username.setCustomValidity('')
}
})需要注意的是,当设置自定义错误后,需要在反情况下再次设置空字符串,否则验证会一致失败.如上代码所示.
另外需要注意的是：所有的验证都是在触发提交事件时才会被触发。也就是当点击
submit按钮时，才会验证。
https://antmoe.gitee.io/project/2020/05/11/04_HTML5表单验证.html
1 |
|
表单提交
submit事件1
2
3
4
5var form = document.forms[0]
form.addEventListener('submit', function (e) {
console.log('当前表单以被提交')
e.preventDefault()
})submit()1
2
3
4var btn = document.getElementById('btn')
btn.addEventListener('click', function (e) {
form.submit()
})
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小康博客！
打赏
![wechat]()
wechat![alipay]()
alipay
评论
TwikooWaline
