<!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. 信息安全之路-web-xss学习(1)

    关于xss反射性漏洞 1.未加任何过滤的 (1).在dvwa平台上可以看到源代码,如下 low级别 为了便于理解,代码如下: <?php // Is there any input? if( a ...

  2. js回调函数以及同步与异步

    1. 背景介绍javascript的单线程特性由于javascript语言是一门“单线程”的语言,所以,javascript就像一条流水线,仅仅是一条流水线而已,要么加工,要么包装,不能同时进行多个任 ...

  3. scipy 短时傅里叶变化

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

  4. linux配置虚拟机的网络服务

    一.找到网卡位置 二.配置协议 删除网卡物理地址+UUID(方便后期克隆虚拟机,不至于多个虚拟机之间有相同的网卡物理地址,防止出现网络问题)`` cd /etc/sysconfig/network-s ...

  5. [原][杂谈]如果人类的末日："天网"出现

    本文由南水之源在2019年3月21日发布,转载需声明原作者 本文仅为一次基于科技发展与科幻小说的幻想,如果天网真的出现,请不要参考这篇逻辑破败的推论. 参考: 天网(Skynet),是电影<终结 ...

  6. 8.2 GOF设计模式一: 单实例模式 SingleTon

    GOF设计模式一: 单实例模式 SingleTon  整个美国,只有一个“现任美国总统”  比如,在学校,“老师”,有数百个:“校长”,只有一个  系统运行时,如何保证某个类只允许实例化一个对象 ...

  7. 字符串sorted，和sort区别

    s=["a","s","b"] s.sort() print(s) ['a', 'b', 's'] s=["a",&qu ...

  8. rsyslog及loganalyzer

    日志:历史日志 历史事件: 时间记录,事件的关键性程度,loglevel 系统日志服务: syslogd,守护进程 syslogd:system klogd:kernel   rsyslog: sys ...

  9. centos升级openssl方法及步骤

    1.下载要升级到的openssl包https://cdn.openbsd.org/pub/OpenBSD/OpenSSH/portable/openssh-7.4p1.tar.gz 2.升级opens ...

  10. Charles在Mac、iPhone、Android上抓http/https协议的包

    1.我使用的版本是4.0.2,下载和破解网上方法很多,不做说明 2.Charles在Mac上抓http/https协议的包 2.1先把这三个都给装上,装完后会自动跳转到钥匙串中 2.2如果装完后提示证 ...