js显示表单的提交验证

<!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显示表单的提交验证的更多相关文章

表单：提交验证，及blur事件验证
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
JS 表单自动提交
一.前言在做项目中,将有些容易忘记的代码进行汇总. 二.案例表单提交,如一个页面的搜索. 表单的代码 <form class="search-form" id=" ...
常用js表单文本域验证
1.验证是否为正确的邮箱地址注意:本方法只能验证以@a.b结尾的邮箱地址,对于三级及三级以上的邮箱,比如@iie.ac.cn结尾的会出现错误 function isEmail(o){ var reg ...
js 表单验证控制代码大全
js表单验证控制代码大全关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...
js阻止form表单重复提交
防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...
js表单提交,面向对象
一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...
jquery.validation.js 表单验证
jquery.validation.js 表单验证官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...
Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
AngularJS系列：表单全解（表单验证，radio必选，三级联动，check绑定，form提交验证）
一.查看$scope -->寻找Form控制变量的位置 Form控制变量格式:form的name属性.input的name属性.$... formName.inputField.$pristi ...

随机推荐

mc面试题记录
1.linux 查看磁盘空间 df -hl 2.根目录下有哪些文件及其作用 3.查找/tmp下的文件内容含有abc的命令 grep -rn "abc" /tmp4.linux下的s ...
Prim算法、Kruskal算法和最小生成树 | Minimum Spanning Tree
graph to tree非常有趣! 距离的度量会极大地影响后续的分析,欧式距离会放大差异,相关性会缩小差异,导致某些细胞群分不开. 先直观看一下,第一个是Prim,第二个是Kruskal.但是肯定都 ...
vSphere虚拟化平台升级注意事项
关注嘉为科技,获取运维新知一. Vmware生命周期查询目前,绝对部分企业均使用VMware vSphere 来构建云计算基础架构,从而减少运行的服务器数量,降低资金成本和运营成本,提高业务灵活性 ...
multiThread (一）
并发系列(1)之 Thread 详解阅读目录一.线程概述二.线程状态三.源码分析 1. native注册 2. 构造方法和成员变量 3. start 方法 4. exit 方法 5. 弃用 ...
js如何实现类的继承
方法一:借助构造函数实现继承这种方法的缺点:原型链上的东西并没有被继承. 方法二:借助原型链实现继承这种方法的缺点:改变了一个实例对象,另一个实例对象也跟着改变,因为s1.__proto__ == ...
【数据结构】运输计划 NOIP2015提高组D2T3
[数据结构]运输计划 NOIP2015提高组D2T3 >>>>题目 [题目描述] 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航 ...
jq里验证插件的自定义方法Jquery.validator.addMethod()示例
最近写验证的时候感觉原生的验证谢了一遍又一遍,就想到了“不要重复造轮子,学会管理自己的工具库”这句名言,于是尝试用jq的validator. 用过又发现需要自定义方法去验证,于是去查官网,写了Jque ...
IOS-iphone默认的点击效果清除
为需要被清除的元素添加此属性:-webkit-tap-highlight-color:rgba(255,255,255,0);
[bzoj P2726] [SDOI2012]任务安排
[bzoj P2726] [SDOI2012]任务安排 Time Limit: 10 Sec Memory Limit: 128 MB Submit: 1204 Solved: 349[Submit] ...
sass学习小记
错误在sass命令行编译中遇到了一个错误: error E:/前端2/css揭秘/CSS-study/css揭秘/css揭秘.scss (Line 29: Invalid GBK character ...

js显示表单的提交验证

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

随机推荐

热门专题