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 ...
随机推荐
- 编码原则 之 Once and Only Once
原文 The Once and Only Once principle can be thought of as a subset of the Don’t Repeat Yourself princ ...
- Visual Studio 2017/2019 企业版 Enterprise 激活码
VS2017 Enterprise: NJVYC-BMHX2-G77MM-4XJMR-6Q8QF VS2017 Professional: KBJFW-NXHK6-W4WJM-CRMQB-G3CDH ...
- Ubuntu下的Selenium爬虫的配置
在服务器Ubuntu系统上跑爬虫,爬虫是基于Selenium写的,遇到好几个问题,现在这里记录一下. 1. 安装环境 阿里云,Ubuntu16.04,因为没有界面,所以远程命令行操作.爬虫是基于Sel ...
- vue cli 3 lintOnSave 配置有时无效问题
一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...
- sourcetree，创建工作流报错：Fatal: Not a gitflow-enabled repo yet. Please run 'git flow init' first.-》解决办法
1.打开项目下.git/config文件,或者如下图操作: 2.打开config文件以后,删除所有 [gitflow *条目并保存文件 3.关闭并重新打开sourcetree 4.仓库->Git ...
- java 枚举使用教程
转载:https://blog.csdn.net/newbie_907486852/article/details/81027512 一.枚举型常量 首先枚举是一个特殊的class,这个class相当 ...
- flex 垂直居中、两列对齐、自适应宽
flex 垂直居中 <div id="parent"> <div id="child"> </div> </div&g ...
- vue_全局注册过滤器
在一个项目中, 某些过滤器全局都有可能用的到, 统一管理并自动化全局注册是很方便的. 代码如下, 后续只需要在src/filters/index.js中添加方法就可以全局使用过滤器了. // src/ ...
- ieda 快捷键修改方法
框中意思为: 1.增加快捷键 2.增加缩写
- 【转】 glibc detected *** corrupted double-linked list:错误的原因有如下三种可能
一个多线程的大程序运行的时候崩掉了,屏幕上打出这个: *** glibc detected *** corrupted double-linked list: 0xb78381d8 *** 三个原 ...