版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/czh500/article/details/84945696
javascript中表单验证知识点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript中表单验证知识点,雪豹软件工作室,javascript</title>
<link rel="stylesheet" type="text/css" href="mark.css">
<link rel="stylesheet" type="text/css" href="input2.css">
<link rel="stylesheet" type="text/css" href="body.css">
<style type="text/css">
div {
margin: auto;
}
body {
text-align: center;
}
</style>
<script type="text/javascript">
function $(id) {
var objNode = document.getElementById(id);
return objNode;
}
/*
第1种:在submit按钮的onclick事件中添加,如果验证方法返回true则表单会提交,如果返回false则表
单不会提交，onclick="return checkData();"
第2种:在form表单的onsubmit事件中添加,只要使用提交按钮或图像提交域提交form表单，onsubmit事件一定会触发，如果验
证方法返回true则表单会提交,如果返回false则表单不会提交，onsubmit="return checkData();"
注意：使用非提交按钮或非提交域提交表单，onsubmit事件并不会触发，直接在调用submit方法的代码中作验证
第3：使用图像提交域提交表单，本质上与提交按钮相同
*/
//表单验证
function checkData() {
var userName = $("userName").value;
if (userName == "") {
alert("用户名不能为空!");
return false;
}
var password = $("password").value;
if (password == "") {
alert("密码不能为空!");
return false;
}
return true;
}
/*
普通按钮和普通图片提交表单，需要手动提交表单，即document.forms[表单name属性的值].submit();而且需要注
意的是submit()方法执行的时候不会触发form表单的onsubmit事件，所以如下面的例子，下面的例子中，写了一个mySubmit()方
法，在该方法中通过document.forms[下标或表单name属性的值].submit()方式调用submit()方法来提交表单，如果要做数据验
证的话，在调用submit()方法前调用checkData()方法即可
还有一点需要特别的注意，页面中所有的控件的name和id属性的值都不要等于submit，要不然表单会提交不了(原因就
是document.forms[表单name属性的值].submit()的时候，浏览器会认为submit()方法不是一个方法，而认为是一个控
件的name或控件的id,换句话说就是表单.表单元素名称这样的方式是获得一个表单下的某个表单元素控件，巧就巧在这里，如果是某个表单元素的name属性值和id属性值与表
单的submit()方法重名了的话，那么浏览器就会优先将name和id解析为某个表单元素控件，而不是解析成表单的方法，所以就会出现无法提交表单的情况
所以总结一下：
哪个表单需要通过document.forms[表单name属性的值].submit()这种方式手动提交的话，就要特别注意该表单内的所有表单元素控件的name属性值和id属性值不
要等于submit，否则就会造成和submit()方法重名，浏览器会优先把submit()方法解析成某个表单元素控件，而不是解析成表单的方法，从而造成表单无法提交的情况
别说表单了，最好是整个页面的所有控件的name属性和id属性的值都不要等于关键字，更不要把控件的name属性和id属性的值设置成和系统的方法名一样，因为很容易造成浏览器解析错误
)
*/
//普通图片提交表单
function mySubmit(){
//alert(" 表单控件 = " + testMyForm + " 控件id = " + testMyForm.id + " 控件name = " + testMyForm.name);
//alert(" 我是 " + testMyForm + " 表单名字 = " + document.forms[0].name + " 表单id = " + document.forms[0].id);
// alert("document.表单id = " + document.testMyForm);//使用document.表单id属性值的这种方式不能获取到表单控件
// alert("document.表单name = " + document.testForm.id);//使用document.表单name属性值的这种方式可以获取到表单控件
// alert("直接用控件id访问控件的属性" + testMyForm.name);//直接使用控件id属性值的方式可以获取到表单控件
//alert(document.getElementById("testMyForm"));
if (checkData()) {
//直接写控件的id名字就是该控件对象
//testMyForm.submit();
//document.getElementById("testMyForm").submit();
//document.testForm.submit();
//document.forms[0].submit();
//document.forms["testForm"].submit();
/*
使用document.forms["表单name"]和使用document.forms["表单id"]都可以得到表单控件，当然也可
以使用下标的方式得到表单控件，如document.forms[0](我是在火狐浏览器下测试的，谷歌浏览器和IE浏览器没有测试)
*/
//alert("使用表单的name得到表单action = " + document.forms['testForm'].action);
//alert("使用表单的id得到表单action = " + document.forms["testMyForm"].action);
//document.forms["testMyForm"].submit();//使用表单id的方式得到表单控件
//document.forms['testForm'].submit();//使用表单name的方式得到表单控件，一般是用表单name的方式
/*个人建议还是用document.getElementById(控件id属性值)的方式比较好，各个浏览器都支持这种方式*/
document.forms[0].submit();//使用下标的方式得到表单控件
}
}
function test(){
/*
document.forms[下标]和document.forms[form的name]和document.forms[form的id]这3种方
式都可以获得表单控件(我是在火狐浏览器和谷歌浏览器中测试的，其他的浏览器没测试)
*/
//alert("通过表单[下标] = " + document.forms[1].action);
//alert("通过表单[form的name] = " + document.forms['helloTest'].action);
//alert("通过表单[form的id] = " + document.forms["hiTest"].action);
document.forms[1].submit();//使用下标的方式得到表单控件
}
</script>
</head>
<body>
<div>
<form name="testForm" id="testMyForm" action="calculator.html" method="post" onsubmit="return checkData();">
用户名:<input type="text" id="userName" name="userName"><br>
<br> 密码:<input type="password" id="password" name="password"><br>
<br>
<input type="submit" id="submit3" name="submithaha" value="提交" style="width: 150px;" onclick="return checkData();">
<input type="reset" value="重置" style="width: 150px;">
<input type="image" src="img/img1.png" title="图像提交域" onclick="return checkData();">
<input type="button" value="普通按钮提交表单" onclick="mySubmit()">
<input type="button" value="故意把该控件的name属性值等于submit和表单的submit()方法重名" name="submithehe">
<input type="text" value="故意把该控件的name属性值等于submit和表单的submit()方法重名" id="submithaha">
</form>
<input type="text" value="故意把该控件的name属性值等于submit和表单的submit()方法重名" name="submit">
<img title="普通图片提交表单" src="img/img4.jpg" onclick="mySubmit()">
</div>
<div>
<form action="calculator.html" name="helloTest" id="hiTest">
测试：<input type="text"><br><br>
<!--
参考网页：http://www.cnblogs.com/lonelyxmas/p/3735446.html?utm_source=tuicool&utm_medium=referral
submit:特殊的button，会自动将表单的数据提交，onClick方法不加return 会自动提交，并不会起到约束的作用，
所以，使用submit时需要验证请加 return true或false.
例：<input type="submit" name="Submit" value="注 册" onClick=" return checkData();">，
在JS中判断的时候 写return true; 或者 return false;
-->
<input type="text" value="故意把该控件的name属性值等于submit和表单的submit()方法重名" id="submitaaaaaa">
<input type="submit" value="测试submit按钮提交表单" onclick="test()">
<input type="button" value="测试普通按钮提交表单" onclick="test()">
</form>
</div>
</body>
</html>