HTML: Form表单
<!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="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="submit">
</form>
<script>
let forms=document.forms
console.log(forms)
let form=forms.item(0)
console.log(form)
elements=form.elements
console.dir(elements)
console.info(elements[0]===elements.username)
form.onsubmit=function(e){
console.dir(e)
console.info('onsubmit')
e.preventDefault()
// return false
}
</script>
</body>
</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" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" value="submit">
</form>
<script>
let forms = document.forms
console.log(forms)
let form = forms.item(0)
console.log(form)
elements = form.elements
console.dir(elements)
console.info(elements[0] === elements.username)
form.onsubmit = function (e) {
console.dir(e)
console.info('onsubmit')
e.preventDefault()
// return false
}
let input = elements.username
input.onfocus = function (e) {
console.info('onfocus', e)
}
input.onblur = function (e) {
console.info('onblur', e)
}
input.onchange = function (e) {
console.info('onchange', e)
console.warn(input.value)
}
input.oninput = function (e) {
console.info('oninput', e)
}
</script>
</body>
</html>
禁止form默认提交,改用ajax提交
<!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="">
<h3 style="display: none;">username&password wrong</h3>
username: <input type="text" name="username" autocomplete="off"><br>
password: <input type="text" name="password" autocomplete="off"><br>
<button>submit</button>
</form>
<script>
const usernameElem = document.querySelector('input[name=username]')
const passwordElem = document.querySelector('input[name=password]')
const h3Elem = document.querySelector('h3')
const form = document.forms[0]
form.addEventListener('submit', e => {
e.preventDefault()
const username = usernameElem.value
const password = passwordElem.value
if (!username || !password) return console.log('not full')
const xhr = new XMLHttpRequest()
xhr.open('post', 'http://localhost:555/vanity', async = true)
xhr.onload = function () {
const { message, code } = JSON.parse(xhr.responseText)
if (code === 1) {
window.location.href = 'index.html'
} else if (code === 2) {
h3Elem.style.display = 'block'
}
}
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send(`username=${username}&password=${password}`)
})
</script>
</body>
</html>
