目录
（1）通过向form标签中添加onsubmint事件实现表单提交
（2）通过向标签中添加onclick事件触发js函数以提交表单
一、JavaScript表单校验
表单校验，时HTML网页中常常会用到的一个功能，例如，在HTML页面中实现登录功能，登录成功后跳转，这就需要用到表单校验，再或者，在HTML网页中插入一个调查表，但调查表中某些内容不能为空，需要填写内容方可提交。
二、提交表单的两种方式
（1）通过向form标签中添加onsubmint事件实现表单提交
代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function check(){
var inputElement = document.getElementById("user_name");
if(inputElement.value==""){
alert("请输入用户名");//当用户名为空时，弹出警告
return false;//将onsubmint值置为false，即用户名为空时无法提交
}
inputElement = document.getElementById("password");
if(inputElement.value==""){
alert("请输入密码");//当密码为空时，弹出警告
return false;//将onsubmint值置为false，即密码为空时无法提交
}
return true;
}
</script>
<!--若表单提交成功，则跳转到百度界面-->
<form action="http://www.baidu.com" οnsubmit="return check()"><!--添加一个form表单,且当onsubmit为true时，才可以提交-->
<input id="user_name" placeholder="请输入用户名" />
<input id="password" type="password" placeholder="请输入密码" />
<input type="submit" value="登录" /><!--插入提交按钮-->
<input type="reset" value="重置"/><!--点击重置按钮可将文本框内容清空-->
</form>
</body>
</html>
页面效果如下：
用户名为空时，点击提交：
密码为空时，点击提交：
提交成功，则跳转到百度界面。
（2）通过向标签中添加onclick事件触发js函数以提交表单
代码示例：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<style>
i{
font-style: normal;
cursor: pointer;
color: gainsboro;
background-color: brown;
border: 1px,solid,rosybrown ;
display: inline-block;
height: 30px;
width: 60px;
text-align: center;
line-height: 30px;
}
</style>
<form id="login" action="http://www.baidu.com">
<input id="user_name" placeholder="请输入用户名" />
<input id="password" type="password" placeholder="请输入密码" />
<input type="radio" name="sex" />男<input type="radio" name="sex" />女<!--单选框-->
<select id="grade"><!--下拉列表-->
<option id="0">--请选择--</option>
<option id="1">一年级</option>
<option id="2">二年级</option>
</select>
<i id="botton" οnclick="check()">登录</i>
<i id="reset">重置</i>
</form>
<script>
document.getElementById("reset").addEventListener("click",function(){
document.getElementById("login").reset();
});
</script>
</body>
</html>
js代码：
function check(){
var inputElement = document.getElementById("user_name");
if(inputElement.value==""){
alert("请输入用户名");
return;
}
inputElement = document.getElementById("password");
if(inputElement.value==""){
alert("请输入密码");
return;
}
var inputElements = document.getElementsByName("sex");
var flag = 0;
for(var i = 0;i<inputElements.length;i++){
if(inputElements[i].checked){
flag = 1;
break;
}
if(flag == 0){
alert("请选择性别");
return;
}
}
var options = document.getElementById("grade").options;
for(i = 0;i<options.length;i++){
if(options[i].selected&&options[i].id==0){
alert("请选择年级");
return;
}
}
document.getElementById("login").submit();//经过一系列空判别时，通过submit()方法提交
}
document.getElementById("reset").addEventListener("click",
function(){
document.getElementById("login").reset();
}
);效果同上述，不再赘述。
