1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<script type="text/javascript">
  7. 			document.onkeydown=function(event){
  8. 				//获取键盘的回车键
  9. 				if(event.keyCode==13){
  10. 					var sh=show();
  11. 					if(sh!=false){
  12. 						//如果非空验证通过，则提交表单
  13. 						document.forms[0].submit();
  14. 					}
  15. 				}
  16. 			}
  17.  
  18. 			function show(){
  19. 				//获取用户名
  20. 				var name=document.getElementById('username');
  21. 				//获取密码
  22. 				var pwd=document.getElementById('password');
  23. 				//获取确认密码
  24. 				var repwd=document.getElementById('repassword');
  25. 				//获取年龄
  26. 				var ageObj=document.getElementById('age');
  27. 				//获取学历
  28. 				var eduObj=document.getElementById('edu');
  29.  
  30. 				//验证用户名是否为非空，如果为空
  31. 				if('' == name.value || null == name.value || name.value.trim() == ''){
  32. 					//获取提示信息行
  33. 					var userSpanObj = document.getElementById('userSpan');
  34. 					//打印提示信息
  35. 					userSpanObj.innerHTML = "<font color='red'>用户名不能为空!!!</font>";
  36. 					//获取鼠标焦点
  37. 					name.focus();
  38. 					return false;
  39. 				}else{
  40. 					//如果为非空，获取提示信息行
  41. 					var userSpanObj = document.getElementById('userSpan');
  42. 					//提示信息为空
  43. 					userSpanObj.innerHTML = "";
  44.  
  45. 				}
  46.  
  47. 				//验证密码是否为非空，如果为空
  48. 				if('' == pwd.value || null == pwd.value || pwd.value.trim() == ''){
  49. 					//获取提示信息行
  50. 					var pwdSpanObj = document.getElementById('pwdSpan');
  51. 					//打印提示信息
  52. 					pwdSpanObj.innerHTML = "<font color='red'>密码不能为空!!!</font>";
  53. 					//获取鼠标焦点
  54. 					pwd.focus();
  55. 					return false;
  56. 				}else{
  57. 					//如果为非空，获取提示信息行
  58. 					var pwdSpanObj = document.getElementById('pwdSpan');
  59. 					//提示信息为空
  60. 					pwdSpanObj.innerHTML = "";
  61. 				}
  62.  
  63. 				//验证确认密码是否为非空，如果为空
  64. 				if ('' == repwd.value || null == repwd.value || repwd.value.trim() == '') {
  65. 					//获取提示信息行
  66. 					var repwdSpanObj = document.getElementById('repwdSpan');
  67. 					//打印提示信息
  68. 					repwdSpanObj.innerHTML = "<font color='red'>确认密码不能为空!!!</font>";
  69. 					//获取鼠标焦点
  70. 					repwd.focus();
  71. 					return false;
  72. 				} else{
  73. 					//如果为非空，获取提示信息行
  74. 					var repwdSpanObj = document.getElementById('repwdSpan');
  75. 					//提示信息为空
  76. 					repwdSpanObj.innerHTML = "";
  77. 				}
  78.  
  79. 				//如果密码的输入不一致
  80. 				if (repwd.value!=pwd.value) {
  81. 					//获取提示信息行
  82. 					var repwdSpanObj = document.getElementById('repwdSpan');
  83. 					//打印提示信息
  84. 					repwdSpanObj.innerHTML = "<font color='red'>密码不一致!!!</font>";
  85. 					//获取鼠标焦点
  86. 					repwd.focus();
  87. 					return false;
  88. 				} else{
  89. 					//如果密码的输入一致，获取提示信息行
  90. 					var repwdSpanObj = document.getElementById('repwdSpan');
  91. 					//提示信息为空
  92. 					repwdSpanObj.innerHTML = "";
  93. 				}
  94.  
  95. 				//验证年龄是否为非空，如果为空
  96. 				if('' == ageObj.value || null == ageObj.value || ageObj.value.trim() == ''){
  97. 					//获取提示信息行
  98. 					var ageSpanObj = document.getElementById('ageSpan');
  99. 					//打印提示信息
  100. 					ageSpanObj.innerHTML = "<font color='red'>年龄不能为空!!!</font>";
  101. 					//获取鼠标焦点
  102. 					ageObj.focus();
  103. 					return false;
  104. 				}else{
  105. 					//如果为非空，获取提示信息行
  106. 					var ageSpanObj = document.getElementById('ageSpan');
  107. 					//提示信息为空
  108. 					ageSpanObj.innerHTML = "";
  109. 				}
  110.  
  111. 				//如果option的属性value为0，则意味着未选择
  112. 				if(0==eduObj.value){
  113. 					var eduSpanObj = document.getElementById('eduSpan');
  114. 					eduSpanObj.innerHTML = "<font color='red'>学历不能为空!!!</font>";
  115. 					return false;
  116. 				}else{
  117. 					var eduSpanObj = document.getElementById('eduSpan');
  118. 					eduSpanObj.innerHTML = "";
  119. 				}
  120. 				return true;
  121. 			}
  122. 		</script>
  123. 	</head>
  124. 	<body>
  125. 		<!--
  126.         	作者：blowing1inthewind@126.com
  127.         	时间：2018-07-01
  128.         	描述：表单的提交方式必须为get方式
  129.         -->
  130. 		<form action="demo04.html" method="get">
  131. 			<table align="center" width="500px" border="0">
  132. 				<tr>
  133. 					<td>用户名：</td>
  134. 					<td><input type="text" id="username"  name="username"/></td>
  135. 					<td>
  136. 						<span id="userSpan"></span>
  137. 					</td>
  138. 				</tr>
  139. 				<tr>
  140. 					<td>密码：</td>
  141. 					<td><input type="password" id="password" name="password"/></td>
  142. 					<td>
  143. 						<span id="pwdSpan"></span>
  144. 					</td>
  145. 				</tr>
  146. 				<tr>
  147. 					<td>确认密码：</td>
  148. 					<td><input type="text" id="repassword" name="repassword"/></td>
  149. 					<td>
  150. 						<span id="repwdSpan"></span>
  151. 					</td>
  152. 				</tr>
  153. 				<tr>
  154. 					<td>年龄：</td>
  155. 					<td><input type="text" id="age" name="age"/></td>
  156. 					<td>
  157. 						<span id="ageSpan"></span>
  158. 					</td>
  159. 				</tr>
  160. 				<tr>
  161. 					<td>性别：</td>
  162. 					<td>
  163. 						<input type="radio" name="sex" checked="checked"/>男
  164. 						<input type="radio" name="sex"/>女
  165. 					</td>
  166. 				</tr>
  167. 				<tr>
  168. 					<td>学历：</td>
  169. 					<td>
  170. 						<select id="edu" name="edu">
  171. 							<option value="0">--请选择--</option>
  172. 	            			<option value="1">小学</option>
  173. 	                        <option value="2">中学</option>
  174. 	                        <option value="3">大学</option>
  175. 		            	</select><br/>
  176. 					</td>
  177. 					<td>
  178. 						<span id="eduSpan"></span>
  179. 					</td>
  180. 				</tr>
  181. 				<tr>
  182. 					<td colspan="3" align="center">
  183. 						<input type="submit" value="注册" onclick="return show()" />
  184. 						<!--<button onclick="return show()">注册</button>-->
  185. 					</td>
  186. 				</tr>
  187. 			</table>
  188. 		</form>
  189. 	</body>
  190. </html>

　　

js显示表单的提交验证的更多相关文章

  1. 表单：提交验证，及blur事件验证

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. JS 表单自动提交

    一.前言 在做项目中,将有些容易忘记的代码进行汇总. 二.案例 表单提交,如一个页面的搜索. 表单的代码 <form class="search-form" id=" ...

  3. 常用js表单文本域验证

    1.验证是否为正确的邮箱地址 注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...

  4. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  5. js阻止form表单重复提交

    防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...

  6. js表单提交,面向对象

    一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...

  7. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  8. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  9. AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）

    一.查看$scope -->寻找Form控制变量的位置 Form控制变量 格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

随机推荐

  1. 国内环境安装k8s

    环境准备 1. 配置/etc/hosts文件,将所有机器配置成通过主机名可以访问. 2. 如果环境中有代理,请一定要在环境变量中将no_proxy配置正确. 3.  master还需要执行下面的命令 ...

  2. 一键快速部署CodeBlocks的EGE图形库工具

    大一下学期,学完了c语言的基本内容, 也就开始开发项目了,此时一个图形界面就比较重要了,c语言中不提供图形界面,一般这些是用的其它开发的图形库,如 Easyx .ege等. 本文就提供 Codeblo ...

  3. spring cloud之Feign的使用

    原始的调用客户端的方式是通过注入restTemplate的方式 restTemplate.getForObject("http://CLIENT/hello", String.cl ...

  4. SAM宏观生态学空间分析帮助文档

    宏观生态学分析软件帮助文档: 引言: 该软件是由布鲁塞尔..大学开发,目的是提供一个综合的空间分析计算平台,主要针对的是宏观生态学数据.该软件可以从网站...上自由获取,该软件的主要特征以及发表在20 ...

  5. MATLAB 实时脚本（live-script）使用

    在matlab2016a及以上的版本不建议安装notebook来编写实施脚本,以为之后的matlab里面会有live-script,他可以创建实施脚本,使脚本与方便操作.那么这个live script ...

  6. 添加并删除Marker

    var data=new Array(); // 定位.显示内容 function setLocation(x,y,name,time,speed,direction,GPSstatus,carsta ...

  7. 关于RedHat Linux无法使用yum命令安装gcc-c++问题

    初入职场,在给RedHat Linux安装环境的时候遇到这么个问题. 参考:http://www.linuxidc.com/Linux/2017-08/146548.htm [root@localho ...

  8. sunset

    may there be enough clouds in your life to make a beautiful sunset

  9. dedecmsV5.7织梦后台更新文章，发布时间不自动更新

    问题:dedecmsV5.7后台修改文章的时候,会更新发布时间,需求是不自动更新时间,还是当时的发布时间 解决: 1.修改后台文件夹/templets/archives_edit.htm,articl ...

  10. mybatis 一对一关联 association 返回空值

    mybatis 一对一关联 association 返回空值 最近学习spring mvc + mybatis开发,看的书是<Spring MVC+Mybatis开发 从入门到精通>,在学 ...