JavaScript 表单

表单

表单元素的 DOM 操作, 除了上面介绍的这些通用方法, 还有一些专属的表单方法. 表单的知识, 可以参考 - HTML5 表单.

value

/*
 Javascript Dom 提供了大部分对应的 HTML 的属性方法, 例如 “value”
 <input type="text" value=""/>
*/

inputElement = document.querySelector('input[type=text]')
inputElement.value = 'jmjc.tech' // 赋值
inputElement.value // 取值

checked

/*
 checked 方法
 <input type='checkbox' checked id='one'>
*/

document.querySelector('#one').checked // true or false

select

/*
像 select 这种 如果获取 option 的值, 操作起来跟上章节的思想就是衔接的

<select>
 <optinon value='name'>Sophie</option>
</select>
*/

selectElement = document.querySelector('select') // 获取到一个集合
selectElement[0] // 集合中的默认元素, 也就是 option
selectElement[0].value // option 的值

表单提交

JavaScript 针对表单的操作, 还有一个非常重要的功能, 就是它可以阻止表单的默认行为, 然后 JavaScript 可以验证数据, 确保无误在通过自己希望的方式, 例如Ajax 等提交数据.

return false

<form action="?">
 <input type="submit" onclick="return false"> <!-- 被点击时 return false, 阻止表单提供 -->
</form>

<!-- 所有就有了下面这种操作 -->
<form action="?">
 <input type="text" name="pass">
 <input type="submit" onclick="return (function() {
   if (document.querySelector('input[type=text]').value < 6) { // 验证数据, 密码小于6位阻止提交
    alert('密码不能小于6位')
    return false
   }
   return true
  })()">
</form>

onsubmit

<!-- onsubmit 的作用是当表单被提交时触发, 其实用起来跟上一种方法一样, 只是另外一种思路 -->

<form onsubmit='retutn f()'>
 <input type="submit" value="submit">
</form>

<script type="text/javascript">
var f = function() {
 // ...
}
</script>

submit()

<!-- 有时候我们不想通过 input submit 提供表单, JavaScript Dom 也提供了独立了 submit() 方法, 让我们可以结合事件, 绑定在其他元素上 -->

<form>
 <input type="text">
</form>

<p onclick="return (function() {
 form = document.querySelector('form')
 form.submit()
})()">点击提交表单</p>