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 ...
随机推荐
- android 百度地图 定位获取位置失败 62错误
一切正常步骤进行但是还是没有获得定位,得到的坐标总是49E.xxxx,错误代码总是62 总是以为代码.或jar包.或还有什么权限没给.搞了好久,十分郁闷.在控制台上又没有什么具体的错误提示 经过无数次 ...
- mongoose一看就会的基本操作
Mongoose是在node.js异步环境下对mongodb进行便捷操作的对象模型工具 那么要使用它,首先你得装上node.js和mongodb,关于mongodb的安装和操作介绍可以参考:http: ...
- 技巧 筛1~n的所有因子
从 i : 1~n, 是i的倍数, 则计入该数 复杂度 n*(1/1+1/2+1/3+...1/n)=nlogn ll d[N]; // 计每个数的因子数 set<ll> s[N]; // ...
- font-spider-plus，字体压缩插件使用笔记
font-spider-plus使用笔记, fsp是一个腾讯的大佬改版后的font-soider 主要思路是 采集线上网页使用到的字体,从字体文件中分离出来,完成大幅度压缩, 1,npm i font ...
- 20175317 《Java程序设计》第八周学习总结
20175317 <Java程序设计>第八周学习总结 教材学习内容总结 第八周我学习了教材第十五章的内容,认识了什么是泛型与集合框架,具体内容如下: 泛型 1. 如何声明泛型类 2. 如何 ...
- Python字符串 --Python3
Python语言中,字符串是用两个双引号或者单引号括起来的词汇表或多个字符. 1.Python字符串的两种序号体系 反向递减序号:-- -9 -8 -7 -6 -5 -4 -3 -2 -1 正向递增序 ...
- Notepad++编译和运行C语言 （GCC）
我们在学习C语言的时候,实际上只需要编译器和编辑器就能开搞了.(初学者过早接触IDE不利于理解程序构建的过程) 在看这篇文章的时候,假设你已经知道如何把GCC配置到环境变量,并且会在命令行/终端下使用 ...
- MongoVUE的table view视图不显示列标题
近来项目用到mongodb,遂装了个MongoVUE,当然是破解版的. 但是发现个小问题,就是table view视图下列标题文字标签不见了,Find的执行按钮也是空白一片: 开始以为破解的不彻底,重 ...
- WEB UI 上传URL附件(使用方法备份)
FUNCTION zcrm_update_atta. *"------------------------------------------------------------------ ...
- linux 常用指令
w 指令可以看到目前接入到服务器的用户(终端)history xx 可以查看本用户(本终端)最后执行的xx条指令last 指令可以查看登录的日志grep "str" filName ...