版权声明：版权所有-江西服装学院 https://blog.csdn.net/qq_38263696/article/details/82980720
提交表单数据
- 单击submit按钮按钮
- 表单元素使用From对象的submit()方法;
(记住form里面的表单元素有一个form属性，它指向它所在的form元素,
也就是说在在表单元素的onclick事件里用this.form.submit();
即可提交数据
)
阻止表单数据提交
1submit按钮onclick()事件处理函数返回false(阻止事件的默认行为);
2`Form对象的onsubmit()事件处理函数返回false;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>this is test</title>
</head>
<body>
<form action="#" method="get">
<p>
<lable for="number">账号:</lable>
<input type="text" name="number" id="number">
</p>
<p>
<lable for="pwd">密码:</lable>
<input type="pwd" name="pwd" id="pwd">
</p>
<p>
<span>submit按钮 </span>
<input type="submit" value="登入">
<br>
<span>button按钮 </span>
<button type="button">登入</button>
</p>
</form>
</body>
</html>
<script>
//简单的处理用户输入的数据
var checkUserInput={
number: function(){
var number = document.getElementById("number");
var value=number.value //拿到用户输入的value,下面想怎么验证就怎么验证，
if(value ===""){
return [false,"账户"];
}
return [true,"账号"];
} ,
pwd: function(){
var pwd = document.getElementById("pwd");
var value=pwd.value //拿到用户输入的value,下面想怎么验证就怎么验证，
if(value ===""){
return [false,"密码"];
}
return [true,"密码"];
}
}
var btn = document.getElementsByTagName("button")[0];
//验证成功,通过From对象的submit()提交,
//验证失败弹出警告框
btn.onclick= function(){
if(checkUserInput.number()[0] && checkUserInput.pwd()[0]){
this.form.submit();
}else{
alert(checkUserInput.number()[1] +"和"+checkUserInput.pwd()[1]+"不合法"+"\n你的IP地址已被记入，请老实点!");
}
};
var form = document.getElementsByTagName("form")[0];
//单击submit按钮，触发这个按钮的click事件(要求:这个事件没有被祖先元素阻止这个事件传播)
//if onclik事件处理函数返回false,浏览器会阻止onclick事件的默认行为，
// 也就是不会触发From对象的submit事件;
//else 触发Form对象的submit事件;
//form.onsubmit()返回false,数据就不会提交
form.onsubmit = function (){
if(checkUserInput.number()[0] && checkUserInput.pwd()[0]){
return "OK";
}else{
alert(checkUserInput.number()[1] +"和"+checkUserInput.pwd()[1]+"不合法"+"你的IP地址已被记入，请老实点!");
return false;
}
}
</script>