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 ...

随机推荐

ZJOI2019游记
Day-2 本蒟蒻有幸能去参加ZJOI2019,然而出发前就做好了爆0的准备. 坐了差不多6,7个小时的车,车上基本就是在颓知乎和打雀,然后就到了酒店. 招宝山酒店--本人住过的第一个四星级酒店,看上 ...
TP5创建动态数据表
$sql = " CREATE TABLE IF NOT EXISTS `$table_name` (`id` int(11) unsigned NOT NULL AUTO_INCREMEN ...
集训队日常训练20181201 E 1005 : 小蝌蚪
时间限制(普通/Java):500MS/1500MS 内存限制:65536KByte总提交: 25 测试通过:5 描述有 n 个装着小蝌蚪的水缸排成一排,你拥有一个无限 ...
sparkSQL脚本更改问题
相应的pom依赖文件 <dependencies> <!-- <dependency> <groupId>org.apache.storm</group ...
git删除文件夹
git rm 要删除的文件夹 -r -f git commit -m 'del config' git push 使用场景,删除test文件夹,本来在码云上,正常的文件夹右击会出现 ...
Cannot resolve classpath entry: /Program Files/IBM/SQLLIB/java/db2java.zip
在mybatis的逆向工程中,使用java代码和xml配置文件生成时出现以下的错误原来自己在复制官方配置文件的参考时将这一句也复制了进来删掉后运行即可!成功的话控制台是没有输出的
python使用adb获取Android Phone截图（解决Windows传输编码导致png文件损坏的问题）
使用adb命令 ./adb shell screencap -p 可以截取当前屏幕,并且作为stdout,传给外部.那么对于python,我们可以用如下代码获取数据流. 使用Popen创建子进程用于读 ...
helm一键安装mariadb-ha（详细）
一. 二.单机安装一主一从先创建对应pv https://github.com/helm/charts/blob/master/stable/mariadb/templates/master-sta ...
Envoy 源码分析－－buffer
目录 Envoy 源码分析--buffer BufferFragment RawSlice Slice OwnedSlice SliceDeque UnownedSlice OwnedImpl Wat ...
ArrayList与LinkList
1.ArrayList 1)继承结构 2)ArrayList是数组存储结果,初始容量为0,添加第一个元素后容器为10,后面每次超过容量时,容量递增50%,每次扩容都需要产生新的数组,再把老的数据复制过 ...

js显示表单的提交验证

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

随机推荐

热门专题