JS表单验证（源码，中文注释，英文源码架构，中文简化架构）—

本文链接：https://blog.csdn.net/lsylovejava/article/details/109215490
本文详述了JavaScript实现表单验证的四个关键步骤，包括项目源码、中文注释、英文源码架构和中文简化架构，是前端开发者提升技能的实用指南。
摘要由CSDN通过智能技术生成
踏破虚空成神只需四步

1——项目源代码——
2——项目中文注释——
3——项目英文源码架构——
4——中文抽象架构——
前端项目：表单验证


<!-- 项目之表单验证 -->

<!-- ***************************************************************************** -->

<!-- 源代码-->

<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" >
		function focusObj(id){
				id.style.backgroundColor="#FFCC80"
		}
		function blurMail(id){
			var mail = id.value
			var mailDiv = document.getElementById("mailDiv")
			if(mail == ""){
				mailDiv.innerHTML = "Email不能为空！"
				mailDiv.style.color = "red"
				return false
			}
			if(mail.indexOf("@") == -1){
				mailDiv.innerHTML = "Email格式不正确，必须包含“@”！"
				mailDiv.style.color = "red"
				return false
			}
			if(mail.indexOf(".") == -1){
				mailDiv.innerHTML = "Email格式不正确，必须包含“.”！"
				mailDiv.style.color = "red"
				return false
			}
			id.style.backgroundColor="#FFF"
			mailDiv.innerHTML = "√"
			mailDiv.style.color = "green"
			return true
		}
		function blurPwd(id){
			var pwd = id.value
			var pwdDiv = document.getElementById("pwdDiv")
			if(pwd == ""){
				pwdDiv.innerHTML = "密码不能为空！"
				return false
			}
			if(pwd.length < 6){
				pwdDiv.innerHTML = "密码长度必须达到6个字符！"
				return false
			}
			id.style.backgroundColor="#FFF"
			pwdDiv.innerHTML = "√"
			return true
		}
		function blurRePwd(id){
			var repwd = id.value
			var repwdDiv = document.getElementById("repwdDiv")
			if(repwd != document.getElementById("pwd").value){
				repwdDiv.innerHTML = "两次输入密码不一致，请重新输入！"
				return false
			}
			id.style.backgroundColor="#FFF"
			repwdDiv.innerHTML = ""
			return true
		}
		function blurUser(id){
			var user = id.value
			if(user == ""){
				userDiv.innerHTML = "姓名不能为空！"
				return false
			}
/*			for(var i = 0;i < user.length;i++){
				var j = user.substring(i,i+1)
				if(j == " "){
					userDiv.innerHTML = "姓名中不能包含空格！"
					return false
				}
			}*/	
			if(user.indexOf(" ")!=-1){
				userDiv.innerHTML = "姓名中不能包含空格！"
				return false
			}
			id.style.backgroundColor="#FFF"
			userDiv.innerHTML = ""
			return true
		}
		</script>
	</head>
	<body>
		<div >
			<table border="1px">
				<tr >
					<td colspan="2" align="center">网上书城注册页面</td>
				</tr>
				<form action="" method="post" name="regForm">
				<tr>
					<td align="right">Email：</td>
					<td><input id="email" type="text" size="28" onfocus="focusObj(this)" onblur="blurMail(this)" /></td>
					<td><div id="mailDiv"></div></td>	
				</tr>
				<tr>
					<td align="right">输入密码：</td>
					<td><input id="pwd" type="password" size="30" onfocus="focusObj(this)" onblur="blurPwd(this)" /></td>
					<td><div id="pwdDiv"></div></td>	
				</tr>
				<tr>
					<td align="right">请再次确认密码：</td>
					<td><input id="repwd" type="password" size="30" onfocus="focusObj(this)" onblur="blurRePwd(this)" /></td>
					<td><div id="repwdDiv"></div></td>	
				</tr>
				<tr>
					<td align="right">姓名：</td>
					<td><input id="user" type="text" size="28" onfocus="focusObj(this)" onblur="blurUser(this)" /></td>
					<td><div id="userDiv"></div></td>	
				</tr>
				<tr>
					<td align="right"> 性别：</td>
					<td><input name="sex" type="radio" value="1" checked="checked" /> 男
						<input name="sex" type="radio" value="0" /> 女</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="button" id="submit" value="注册" /> </td>
				</tr>
				</form>
			</table>
		</div>
	</body>
</html>

<!-- ***************************************************************************** -->

<!-- 中文注释 -->

<!DOCTYPE html> 
<html>
	<head>
        <!--
        一、HTML <meta> 标签:
        <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
        <meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
         
        二、HTML <meta> charset 属性：
        charset 属性规定在外部脚本文件中使用的字符编码。
        如果外部文件中的字符编码与主文件中的编码方式不同，就要用到 charset 属性。
        默认的字符编码是 ISO-8859-1。
        
        三、常用的值：
        UTF-8 - Unicode 字符编码
        ISO-8859-1 - 拉丁字母表的字符编码
         -->
		<meta charset="utf-8" />
        <!--
        一、HTML <script> 标签： 
        <script> 标签用于定义客户端脚本，比如 JavaScript。
        script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
        必需的 type 属性规定脚本的 MIME 类型。
        JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
        
        二、HTML <script> 标签的 type 属性：
        必需的 type 属性规定脚本的 MIME 类型。
        type 属性标识 <script> 和 </script> 标签之间的内容。
        MIME 类型由两部分组成：媒介类型和子类型。
        对于 JavaScript，其 MIME 类型是 "text/javascript"。
        
        （注：“MIME 类型”：
        MIME (Multipurpose Internet Mail Extensions) 是描述消息内容类型的因特网标准。
        MIME 消息能包含文本、图像、音频、视频以及其他应用程序专用的数据。
        ）
        -->
		<script type="text/javascript">
            /*
            一、function 语句用于声明一个函数。
            函数声明后，我们可以在需要的时候调用。
            在 JavaScript 中，函数是对象，函数也有属性和方法。
            函数也可以通过表达式定义(可以查看 函数定义)。

            二、HTML id 属性：规定 HTML 元素的唯一的 id。
            三、HTML <style> 标签： HTML 文档定义样式信息。
            四、CSS background-color 属性：设置元素的背景颜色。
            */
            function focusObj(id){
                    id.style.backgroundColor="#FFCC80"
            }
            function blurMail(id){
                var mail = id.value
                /*
                一、JavaScript var 语句: var 语句用于声明变量。
                二、HTML DOM Document 对象：使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
                三、HTML DOM getElementById() 方法: 可返回对拥有指定 ID 的第一个对象的引用。
                */ 
                var mailDiv = document.getElementById("mailDiv")
                if(mail == ""){
                    /*
                    一、HTML DOM innerHTML 属性 ：设置或返回表格行的开始和结束标签之间的 HTML。
                    二、CSS color 属性 : 规定文本的颜色。
                    三、js return : 返回true，继续操作。返回false，中断操作。
                    */ 
                    mailDiv.innerHTML = "Email不能为空！"
                    mailDiv.style.color = "red"
                    return false
                }
                if(mail.indexOf("@") == -1){
                    mailDiv.innerHTML = "Email格式不正确，必须包含“@”！"
                    mailDiv.style.color = "red"
                    return false
                }
                if(mail.indexOf(".") == -1){
                    mailDiv.innerHTML = "Email格式不正确，必须包含“.”！"
                    mailDiv.style.color = "red"
                    return false
                }
                id.style.backgroundColor="#FFF"
                mailDiv.innerHTML = "√"
                mailDiv.style.color = "green"
                return true
            }
            function blurPwd(id){
                var pwd = id.value
                var pwdDiv = document.getElementById("pwdDiv")
                if(pwd == ""){
                    pwdDiv.innerHTML = "密码不能为空！"
                    return false
                }
                /*
                JavaScript length 属性：可设置或返回数组中元素的数目。
                */ 
                if(pwd.length < 6){
                    pwdDiv.innerHTML = "密码长度必须达到6个字符！"
                    return false
                }
                id.style.backgroundColor="#FFF"
                pwdDiv.innerHTML = "√"
                return true
            }
            function blurRePwd(id){
                var repwd = id.value
                var repwdDiv = document.getElementById("repwdDiv")
                if(repwd != document.getElementById("pwd").value){
                    repwdDiv.innerHTML = "两次输入密码不一致，请重新输入！"
                    return false
                }
                id.style.backgroundColor="#FFF"
                repwdDiv.innerHTML = ""
                return true
            }
            function blurUser(id){
                var user = id.value
                if(user == ""){
                    userDiv.innerHTML = "姓名不能为空！"
                    return false
                }
    /*			for(var i = 0;i < user.length;i++){
                    var j = user.substring(i,i+1)
                    if(j == " "){
                        userDiv.innerHTML = "姓名中不能包含空格！"
                        return false
                    }
                }*/	
                if(user.indexOf(" ")!=-1){
                    userDiv.innerHTML = "姓名中不能包含空格！"
                    return false  //结束执行
                }
                id.style.backgroundColor="#FFF"
                userDiv.innerHTML = ""
                return true  //继续执行
            }
		</script>
	</head>

	<body>
        <!--
        一、HTML <div> 标签：    
        <div> 可定义文档中的分区或节（division/section）。
        <div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
        如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
        
        二、用法
        <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。
        可以通过 <div> 的 class 或 id 应用额外的样式。
        不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
        可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。
        这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
         -->
		<div >
            <!--
            一、HTML <table> 标签
            <table> 标签定义 HTML 表格。
            简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
            tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
            更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

            二、CSS border边框属性
            CSS边框属性允许你指定一个元素边框的样式和颜色。
            border 简写属性在一个声明设置所有的边框属性。
            
            可以按顺序设置如下属性：
                border-width
                border-style
                border-color
            （常见问题：CSS 样式通常要在head中控制，而不是在body渲染内容中控制）
            -->
			<table border="1px">
                <!-- 
                一、HTML <th> 标签
                定义表格内的表头单元格。
                HTML 表单中有两种类型的单元格：
                表头单元格 - 包含表头信息（由 th 元素创建）
                标准单元格 - 包含数据（由 td 元素创建）
                th 元素内部的文本通常会呈现为居中的粗体文本，而 td 元素内的文本通常是左对齐的普通文本。
                -->
				<tr>
                    <!-- 
                    一、HTML <td> 标签的 colspan 属性
                    规定单元格可横跨的列数。

                    二、HTML <div> 标签的 align 属性
                    规定 div 元素中的内容的水平对齐方式。
                     -->
					<td colspan="2" align="center">网上书城注册页面</td>
				</tr>

                <!-- 
                一、HTML <form> 标签
                <form> 标签用于为用户输入创建 HTML 表单。
                表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
                表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
                表单用于向服务器传输数据。

                二、HTML <form> 标签的 action 属性
                必需的 action 属性规定当提交表单时，向何处发送表单数据。
                
                三、HTML <form> 标签的 method 属性
                method 属性规定如何发送表单数据（表单数据发送到 action 属性所规定的页面）。
                表单数据可以作为 URL 变量（method="get"）或者 HTTP post （method="post"）的方式来发送。
                （注：采用 POST 方法，浏览器将会按照下面两步来发送数据。
                首先，浏览器将与 action 属性中指定的表单处理服务器建立联系，
                一旦建立连接之后，浏览器就会按分段传输的方法将数据发送给服务器。
                在服务器端，一旦 POST 样式的应用程序开始执行时，就应该从一个标志位置读取参数，
                而一旦读到参数，在应用程序能够使用这些表单值以前，必须对这些参数进行解码。
                用户特定的服务器会明确指定应用程序应该如何接受这些参数。）

                四、HTML <form> name 属性
                name 属性规定表单的名称。
                name 属性用于在 JavaScript 中引用元素，或者在表单提交之后引用表单数据。
                -->
				<form action="" method="post" name="regForm">
				<tr>
					<td align="right">Email：</td>
                    <!-- 
                    一、HTML <input> 标签
                    <input> 标签用于搜集用户信息。
                    根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
                    
                    二、HTML id 属性
                    id 属性规定 HTML 元素的唯一的 id。
                    id 在 HTML 文档中必须是唯一的。
                    id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
                    
                    三、HTML <input> 标签的 size 属性
                    size 属性规定输入字段的宽度。
                    对于 <input type="text"> 和 <input type="password">，size 属性定义的是可见的字符数。
                    而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度。

                    四、HTML onfocus 事件属性
                    onfocus 属性在元素获得焦点时触发。
                    onfocus 常用于 <input>、<select> 以及 <a>.
                    提示：onfocus 属性与 onblur 属性相反。
                    -->
					<td><input id="email" type="text" size="28" onfocus="focusObj(this)" onblur="blurMail(this)" /></td>
					<td><div id="mailDiv"></div></td>	
				</tr>
				<tr>
					<td align="right">输入密码：</td>
					<td><input id="pwd" type="password" size="30" onfocus="focusObj(this)" onblur="blurPwd(this)" /></td>
					<td><div id="pwdDiv"></div></td>	
				</tr>
				<tr>
					<td align="right">请再次确认密码：</td>
					<td><input id="repwd" type="password" size="30" onfocus="focusObj(this)" onblur="blurRePwd(this)" /></td>
					<td><div id="repwdDiv"></div></td>	
				</tr>
				<tr>
					<td align="right">姓名：</td>
					<td><input id="user" type="text" size="28" onfocus="focusObj(this)" onblur="blurUser(this)" /></td>
					<td><div id="userDiv"></div></td>	
				</tr>
				<tr>
					<td align="right"> 性别：</td>
					<td><input name="sex" type="radio" value="1" checked="checked" /> 男
						<input name="sex" type="radio" value="0" /> 女</td>
				</tr>
				<tr>
					<td colspan="2" align="center"><input type="button" id="submit" value="注册" /> </td>
				</tr>
				</form>
			</table>
		</div>
	</body>
</html>
<!-- ***************************************************************************** -->

<!-- 英文源码架构-->
<!DOCTYPE html> 
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" >
            function N(id){}
		</script>
	</head>
	<body>
		<div >
			<table>
				<tr ><td >N</td></tr>
				<form>
                    <tr>
                        <td>N</td>
                        <td><input N /></td>
                        <td><div N></div></td>	
                    </tr>
				</form>
			</table>
		</div>
	</body>
</html>


<!-- ***************************************************************************** -->

<!-- 中文架构 -->
文档声明头
文档开始
	网页头部 
		设置字符集
        js脚本
            js函数		

	网页文档主体
		文档分区或节
			表格
                行列
                表单

<!-- ***************************************************************************** -->