一、获取表单元素
通过 form.name 可以获取到相对应的表单元素。
<form action="#" method="post" id="form">
<p>用户名: <input type="text" name="username" /></p>
<p>密码:<input type="password" name="userpass" /></p>
<p>性别:<input type="radio" name="usergender" checked value="男" />男
<input type="radio" name="usergender" value="女" />女
</p>
<p>爱好:
<input type="checkbox" name="userhobby" value="吃饭">吃饭
<input type="checkbox" name="userhobby" value="睡觉">睡觉
<input type="checkbox" name="userhobby" value="写代码">写代码
</p>
<p>
简介:
<textarea name="userinfo"></textarea>
</p>
<p>
<button type="button">注册</button>
</p>
</form>
<script>
//1、通过ID获取表单元素
var form = document.getElementById("form");
//2、获取按钮完成点击动作
var btn = document.getElementsByTagName("button")[0];
//3、根据form.表单元素的name名称获取到具体元素
var username = form.username;
var userpass = form.userpass;
var usergender = form.usergender;
var userhobby = form.userhobby;
var userinfo = form.userinfo;
console.log(username, userpass, usergender, userhobby, userinfo);
btn.onclick = function () {
//4、点击之后获取每一个表单元素的值
console.log(username.value) //用户名：admin
console.log(userpass.value) //密码：123456
console.log(usergender.value) //性别：男
var str = ""
for (var i = 0; i < userhobby.length; i++) {
if (userhobby[i].checked) {
str += userhobby[i].value + ','
}
}
str = str.substring(0, str.length - 1);//爱好 比较特殊 选中的全部获取
console.log(str) //吃饭,写代码
console.log(userinfo.value) //简介 1234
}
</script>
二、表单事件
-
提交事件（form.onsubmit）
form.onsubmit 事件在表单提交时触发，触发事件调用的函数中默认 return true，表示允许表单提交，
return false 阻止表单提交。
<body> <form action="#" method="post" id="form1"> <p>用户名: <input type="text" name="username"/></p> <p> <!--button按钮中type属性有三个值：submit（默认）、reset、button--> <button>注册</button> </p> </form> <script> //1、通过ID获取表单元素 var form = document.getElementById("form1"); //2、通过form.onsubmit事件来触发表单提交 form.onsubmit = function(){ //3、通过form.name名称来获取对应的值，如果为空则不允许提交表单 var username = form.username.value; if(username==""){ //4、判断表单元素中是否值为空 alert('用户名为空'); //5、阻止表单提交，也可以理解为阻止表单提交的默认行为（普通事件写法的阻止事件默认行为） return false; } } </script> </body> -
重置事件
form.onreset 事件在表单重置时调用，return true 表示允许重置，return false 表示阻止表单重置。
<body> <form action="#" method="post" id="form1"> <p>用户名: <input type="text" name="username"/></p> <p> <button>注册</button> <button type="reset">重置</button> </p> </form> <script> //1、通过ID获取表单元素 var form = document.getElementById("form1"); //2、通过form.onreset事件来触发表单重置 form.onreset = function(){ //给出提交框向用户询问 var isTrue = confirm("是否需要重置表单？"); if(isTrue){ //如果点击的是确定按钮就重置表单 return isTrue; }else{ //如果点击的试取消按钮就阻止表单重置 return false; } } </script> </body> -
获取焦点（onfocus）、失去焦点（onblur）
onfocus 事件：当表单元素获得焦点时调用，即光标进入到了输入框
onblur事件：当表单元素失去焦点时调用，即光标离开了输入框
事件名称 语法结构 onfocus 表单元素.onfocus = function(){} onblur 表单元素.οnblur= function(){} 举例：得到焦点给 文本框设置背景，失去则清除背景
<form action="#" method="post" id="form"> <p>用户名: <input type="text" name="username" /></p> <p> <button>注册</button> <button type="reset">重置</button> </p> </form> <script> var form = document.getElementById('form'); //给文本框设置聚焦和失焦 //先获取文本框 var input = form.username; //设置聚焦事件 //元素.onfocus = function(){} input.onfocus = function () { this.style.background = "pink"; } //元素.onblur = function(){} input.onblur = function () { this.style.background = ""; } </script> -
内容只要发生变化时触发的事件（实时监控）
事件名 语法结构 兼容浏览器 oninput 表单元素.oninput = function(){} 标准浏览器+IE9以上 onpropertychange 表单元素.onpropertychange = function(){} ie8以及以下浏览器 举例：密码文本框的输入密码的强度
<form action="#" method="post" id="form"> <p>用户名: <input type="text" name="username" /></p> <p>密码：<input type="password" name="userpass" /> <span></span> </p> <p> <button>注册</button> <button type="reset">重置</button> </p> </form> <script> var form = document.getElementById('form'); var span = document.getElementsByTagName("span")[0]; form.userpass.oninput = inputchange; form.userpass.onpropertychange = inputchange; function inputchange() { if (this.value.length >= 12) { span.innerHTML = "强"; } else if (this.value.length >= 9) { span.innerHTML = "中"; } else if (this.value.length >= 6) { span.innerHTML = "弱"; } else { span.innerHTML = ""; } } </script> -
失去焦点时内容发生变化所触发的事件
语法结构：表单元素.onchange = function(){}
<form action="#" method="post" id="form"> <p>用户名: <input type="text" name="username" /></p> <p> <button>注册</button> <button type="reset">重置</button> </p> </form> <script> var form = document.getElementById('form'); form.username.onchange = function () { console.log(this.value); } </script>
三、表单方法（发生情况在按钮上）
-
提交（submit）和重置（reset）
举例：普通按钮实现提交重置表单的效果
- 提交：表单.submit()
<form action="#" method="post" id="form"> <p>用户名: <input type="text" name="username" /></p> <p> <button type="button">注册</button> </p> </form> <script> //1、通过ID获取表单元素 var form = document.getElementById("form"); //2、获取按钮完成点击动作 var btn = document.getElementsByTagName("button")[0]; //3、按钮点击事件 btn.onclick = function () { var username = form.username.value; if (username != "") { //4、获取表单文本框的值，如果不为空则进行提交 form.submit(); } else { alert('用户名不能为空') } } </script> -
重置：表单.reset()
<form action="#" method="post" id="form">
<p>用户名: <input type="text" name="username" /></p>
<p>
<button>重置</button>
</p>
</form>
<script>
//1、通过ID获取表单元素
var form = document.getElementById("form");
//2、获取按钮完成点击动作
var btn = document.getElementsByTagName("button")[0];
//3、按钮点击事件
btn.onclick = function () {
var isTrue = confirm("是否需要重置表单？");
if (isTrue) {
//如果点击的是确定按钮就重置表单
form.reset();
} else {
//如果点击的试取消按钮就阻止表单重置
return false;
}
}
</script>
-
获取焦点（focus()）、失去焦点( blur() )
<form action="#" method="post" id="form"> <p>用户名: <input type="text" name="username" /></p> </p> </form> <script> //1、通过ID获取表单元素 var form = document.getElementById("form"); var btn = document.getElementById('btn'); //2、通过form.name名称获取表单 form.username.focus(); // form.username.blur(); </script>
四、localStorage（本地存储）
用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除，localStorage 属性是只读的。
存值：localStorage.key = value
取值：localStorage.key
【示例代码:】
localStorage.username = "admin";
localStorage.userpass = "123456";
console.log(localStorage)
console.log(localStorage.username)
案例：登录模拟数据存储到localStorage中，并比较结果，登录成功与否
涉及知识点：
i.JSON.stringify(javascript值) 方法用于将 JavaScript 值转换为 JSON 字符串。
ii.JSON.parse(JSON字符串) 方法用于将一个 JSON 字符串转换为对象。
<body>
<form action="http://www.offcn.com" id="form">
用户名：<input type="text" name="username"><br/>
密码：<input type="password" name="userpass"/><br/>
<button>登录</button>
</form>
<script>
var form = document.getElementById("form");
var btn = document.getElementsByTagName("button")[0];
var username = form1.username;
var userpass = form1.userpass;
form.onsubmit = function(){
//还可以一次性存储多个值
var obj = [{
"username":"admin","userpass":"123456"},{
"username":"张三","userpass":"123456"}]
//JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。
var value = JSON.stringify(obj); //[{"username":"admin","userpass":"123456"},{"username":"张三","userpass":"123456"}]
localStorage.arr = value;
//JSON.parse() 方法用于将一个 JSON 字符串转换为对象。
var data = JSON.parse(localStorage.arr);
//console.log(data); //[{…}, {…}]
var tag = true; //创建一个比对的假设条件
for(var i = 0 ; i < data.length;i++){
if(data[i].username != username.value && data[i].userpass != userpass.value){
tag = false;
break;
}
}
if(tag==true){
alert('用户登录成功');
form.submit();
return true;
}else{
alert('用户登录失败');
return false;
}
}
</script>
</body>