<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript">

			document.onkeydown=function(event){

				//获取键盘的回车键

				if(event.keyCode==13){

					var sh=show();

					if(sh!=false){

						//如果非空验证通过，则提交表单

						document.forms[0].submit();

					}

				}

			}

			function show(){

				//获取用户名

				var name=document.getElementById('username');

				//获取密码

				var pwd=document.getElementById('password');

				//获取确认密码

				var repwd=document.getElementById('repassword');

				//获取年龄

				var ageObj=document.getElementById('age');

				//获取学历

				var eduObj=document.getElementById('edu');

				//验证用户名是否为非空，如果为空

				if('' == name.value || null == name.value || name.value.trim() == ''){

					//获取提示信息行

					var userSpanObj = document.getElementById('userSpan');

					//打印提示信息

					userSpanObj.innerHTML = "<font color='red'>用户名不能为空!!!</font>";

					//获取鼠标焦点

					name.focus();

					return false;

				}else{

					//如果为非空，获取提示信息行

					var userSpanObj = document.getElementById('userSpan');

					//提示信息为空

					userSpanObj.innerHTML = "";

				}

				//验证密码是否为非空，如果为空

				if('' == pwd.value || null == pwd.value || pwd.value.trim() == ''){

					//获取提示信息行

					var pwdSpanObj = document.getElementById('pwdSpan');

					//打印提示信息

					pwdSpanObj.innerHTML = "<font color='red'>密码不能为空!!!</font>";

					//获取鼠标焦点

					pwd.focus();

					return false;

				}else{

					//如果为非空，获取提示信息行

					var pwdSpanObj = document.getElementById('pwdSpan');

					//提示信息为空

					pwdSpanObj.innerHTML = "";

				}

				//验证确认密码是否为非空，如果为空

				if ('' == repwd.value || null == repwd.value || repwd.value.trim() == '') {

					//获取提示信息行

					var repwdSpanObj = document.getElementById('repwdSpan');

					//打印提示信息

					repwdSpanObj.innerHTML = "<font color='red'>确认密码不能为空!!!</font>";

					//获取鼠标焦点

					repwd.focus();

					return false;

				} else{

					//如果为非空，获取提示信息行

					var repwdSpanObj = document.getElementById('repwdSpan');

					//提示信息为空

					repwdSpanObj.innerHTML = "";

				}

				//如果密码的输入不一致

				if (repwd.value!=pwd.value) {

					//获取提示信息行

					var repwdSpanObj = document.getElementById('repwdSpan');

					//打印提示信息

					repwdSpanObj.innerHTML = "<font color='red'>密码不一致!!!</font>";

					//获取鼠标焦点

					repwd.focus();

					return false;

				} else{

					//如果密码的输入一致，获取提示信息行

					var repwdSpanObj = document.getElementById('repwdSpan');

					//提示信息为空

					repwdSpanObj.innerHTML = "";

				}

				//验证年龄是否为非空，如果为空

				if('' == ageObj.value || null == ageObj.value || ageObj.value.trim() == ''){

					//获取提示信息行

					var ageSpanObj = document.getElementById('ageSpan');

					//打印提示信息

					ageSpanObj.innerHTML = "<font color='red'>年龄不能为空!!!</font>";

					//获取鼠标焦点

					ageObj.focus();

					return false;

				}else{

					//如果为非空，获取提示信息行

					var ageSpanObj = document.getElementById('ageSpan');

					//提示信息为空

					ageSpanObj.innerHTML = "";

				}

				//如果option的属性value为0，则意味着未选择

				if(0==eduObj.value){

					var eduSpanObj = document.getElementById('eduSpan');

					eduSpanObj.innerHTML = "<font color='red'>学历不能为空!!!</font>";

					return false;

				}else{

					var eduSpanObj = document.getElementById('eduSpan');

					eduSpanObj.innerHTML = "";

				}

				return true;

			}

		</script>

	</head>

	<body>

		<!--

        	作者：blowing1inthewind@126.com

        	时间：2018-07-01

        	描述：表单的提交方式必须为get方式

        -->

		<form action="demo04.html" method="get">

			<table align="center" width="500px" border="0">

				<tr>

					<td>用户名：</td>

					<td><input type="text" id="username"  name="username"/></td>

					<td>

						<span id="userSpan"></span>

					</td>

				</tr>

				<tr>

					<td>密码：</td>

					<td><input type="password" id="password" name="password"/></td>

					<td>

						<span id="pwdSpan"></span>

					</td>

				</tr>

				<tr>

					<td>确认密码：</td>

					<td><input type="text" id="repassword" name="repassword"/></td>

					<td>

						<span id="repwdSpan"></span>

					</td>

				</tr>

				<tr>

					<td>年龄：</td>

					<td><input type="text" id="age" name="age"/></td>

					<td>

						<span id="ageSpan"></span>

					</td>

				</tr>

				<tr>

					<td>性别：</td>

					<td>

						<input type="radio" name="sex" checked="checked"/>男

						<input type="radio" name="sex"/>女

					</td>

				</tr>

				<tr>

					<td>学历：</td>

					<td>

						<select id="edu" name="edu">

							<option value="0">--请选择--</option>

	            			<option value="1">小学</option>

	                        <option value="2">中学</option>

	                        <option value="3">大学</option>

		            	</select><br/>

					</td>

					<td>

						<span id="eduSpan"></span>

					</td>

				</tr>

				<tr>

					<td colspan="3" align="center">

						<input type="submit" value="注册" onclick="return show()" />

						<!--<button onclick="return show()">注册</button>-->

					</td>

				</tr>

			</table>

		</form>

	</body>

</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. [译]RabbitMQ教程C#版 - 路由

    先决条件 本教程假定 RabbitMQ 已经安装,并运行在localhost标准端口(5672).如果你使用不同的主机.端口或证书,则需要调整连接设置. 从哪里获得帮助 如果您在阅读本教程时遇到困难, ...

  2. 【.Net Core】Assets file project.assets.json not found. Run a NuGet package restore

    问题起因 添加 .net core的Project build失败. 提示以下error: Assets file project.assets.json not found. Run a NuGet ...

  3. scipy 短时傅里叶变化

    原文链接   https://www.cnblogs.com/hoojjack/p/9967298.html 计算短时傅里叶变换(STFT) scipy.signal.stft(x,fs = 1.0, ...

  4. lua相关的小知识

    lua的特性 1. 轻量级:一标准的C语言编写原发开放,编译后仅仅100K,占用内存小: 2. 扩展性:Lua提供了非常已于使用的扩展口和机制: 3. 支持面向过程编程和函数式编程 lua的数据类型 ...

  5. kafka 创建消费者报错 consumer zookeeper is not a recognized option

    在做kafka测试的时候,使用命令bin/kafka-console-consumer.sh --zookeeper 192.168.0.140:2181,192.168.0.141:2181 --t ...

  6. 微信、qq二次分享

    前言 我们平时做微信分享的时候,一般分享出来的页面都是一个简单的html页面,不会加入框架之类的东西.所以当我们在分享出来的页面里面再次进行分享的时候,由于我们没有配置分享的标题.描述这些东西,分享出 ...

  7. 雷林鹏分享：jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  8. 解密：Amazon亚马逊产品Listing关键词刷单排名原理

    第一:基本概念   在阅读正文之前,请先理解下面的几个基本概念.   核心词[高频词.热词.大词.主词]:长度大约1~2个单词构成,指每天搜索量比较多的词,每个行业对高频词的划分不一样,这个主要看自己 ...

  9. 在.net core web项目中生成二维码

    1.添加QRCoder包引用 2. public IActionResult MakeQrCode()        { string url="https://www.baidu.com& ...

  10. hdu6396（思维+输入挂）

    Swordsman Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Submission(s): Accept ...