[JavaScript] 表单验证不通过不提交的JS写法

时间:2021-03-12 18:13:53

主要是本世纪初的写法.
<script> function validateForm(f) { if (f.name.value == "") { alert("You must supply a name"); return false; } return true; } </script> <form id="inputForm" method="post" onsubmit="return validateForm(this)">

Example 2: event handler Javascript

(Yep, early 21st century Javascript was pretty lame, too).

 

One unifying characteristic that these early Javascript experiments had was that the Javascript was tightly intertwined with the HTML. Buttons had onclickonmouseoveronmouseout, etc. handlers whose code was either in the <head> section of the HTML page if you were lucky, or included just before the code that used it if you were less lucky. What ended up happening as a result was that code ended up being cut and pasted and slightly modified into different contexts. As Javascript got to be more and more complex, the desire for reusable components was greater, and Javascript implementations started supporting more of what was called "unobtrusive" Javascript. An unobtrusive form handler would have been implemented as:

<script>
window.onload = function()	{
	var f = document.getElementById("inputForm");
	f.onsubmit = function(f)	{
		if (f.name.value == "")	{
			alert("You must supply a name");
			return false;
		}
		return true;
	}
}
</script>
Example 3: Unobtrusive Javascript form validation
====================