JavaScript：基础表单验证
在用户填写表单的过程之中，往往需要编写一堆的验证操作，这样就可以保证提交的数据时正确的。那么下面就模拟表单验证的处理操作完成。
如果要想进行验证，首先针对于输入的数据来进行一个验证处理。
1、定义一个基础的表单（从标准来讲每一个元素都一定要存在有一个ID属性）
<form action="pass.html" method="post" id="loginForm">
<!--在以后的开发过程之中，必须要保证id与name属性内容完全一致，否则会出现怪异问题-->
登录邮箱：<input type="text" name="email" id="email"></input><br>
<button type="submit" id="subBtn">登录</button>
</form>
范例：
pass.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content=event.html"">
<meta name="keywords" content="event,html,js"> <body>
<h1>表单验证通过！</h1>
</body>
</html>
form.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content=event.html"">
<meta name="keywords" content="event,html,js">
<title>javascript的程序开发之表单提交事件处理</title>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<form action="pass.html" method="post" id="loginForm">
<!--在以后的开发过程之中，必须要保证id与name属性内容完全一致，否则会出现怪异问题-->
登录邮箱：<input type="text" name="email" id="email"></input><br>
<button type="submit" id="subBtn">登录</button>
</form>
</body>
</html>
加载页面时：
点击登录时：
2、随后就需要对于表单的数据进行验证。这个过程应该在form.js文件里完成。
*现在习惯性的做法是直接找到登录按钮进行验证
范例：
form.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content=event.html"">
<meta name="keywords" content="event,html,js">
<title>javascript的程序开发之表单提交事件处理</title>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<form action="pass.html" method="post" id="loginForm">
<!--在以后的开发过程之中，必须要保证id与name属性内容完全一致，否则会出现怪异问题-->
登录邮箱：<input type="text" name="email" id="email"></input><br>
<button type="submit" id="subBtn">登录</button>
</form>
</body>
</html>
form.js
window.onload = function(){ //在页面加载之后动态事件绑定
//找到按钮元素对象并增加一个提交表单事件
document.getElementById('subBtn').addEventListener("submit",function(){
//找到邮件元素对象
var emailObj = document.getElementById("email");
//取出它的值
alert(emailObj.value);
if (emailObj.value == "") {
alert("您还有输入登录邮箱，无法登录！");
}else{
this.submit(); //当前元素提交表单
}
},false);
}
内容为空时：
内容不为空时：
发现：不管内容是否为空，只要点击了确定，表单就通过了，然而，这是不对的：
3、以上的代码只是说可以取得了最简单的验证处理，但是返现表单是不能够进行有效的拦截的，应为如果要想拦截表单，需要的是onsubmit事件,这个事件的特点是如果返回了false，那么就不提交表单，如果返回的是true，表示的是提交表单。
function f () {
return false;
}
<form action="pass.html" method="post" id="loginForm" onsubmit="return f()">
<!--在以后的开发过程之中，必须要保证id与name属性内容完全一致，否则会出现怪异问题-->
登录邮箱：<input type="text" name="email" id="email"></input><br>
<button type="submit" id="subBtn">登录</button>
</form>
此时<form>元素中的onsubmit="return f()”表示将接收f()函数返回的结果，如果此函数返回的是true，表单正常提交，反之，表单不提交。但是这个代码不能够使用。
因为这种操作属于静态的事件绑定处理，不能够用静态，只能通过动态事件绑定处理，在动态事件的验证中，如果要想控制表单的提交，在表单上设置submit事件，而后利用“表单对象.submit()”函数手工提交表单。也即将提交表单的操作交给from，而不是由button去控制。
范例：
form.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content=event.html"">
<meta name="keywords" content="event,html,js">
<title>javascript的程序开发之表单提交事件处理</title>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<form action="pass.html" method="post" id="loginForm" onsubmit="return f()">
<!--在以后的开发过程之中，必须要保证id与name属性内容完全一致，否则会出现怪异问题-->
登录邮箱：<input type="text" name="email" id="email"></input><br>
<button type="submit" id="subBtn">登录</button>
</form>
</body>
</html>
form.js
window.onload = function(){ //在页面加载之后动态事件绑定
//找到表单元素对象并增加一个提交表单事件
document.getElementById('loginForm').addEventListener("submit",function(){
//找到邮件元素对象
var emailObj = document.getElementById("email");
//取出它的值
// alert(emailObj.value);
if (emailObj.value == "") {
alert("您还有输入登录邮箱，无法登录！");
}else{ //输入正确，理论上应该可以进行提交
alert(emailObj.value);
this.submit(); //当前元素提交表单
}
},false);
}
function f () {
return false;
}
内容为空时：
内容不为空时：
发现：内容必须存在，点击确定，表单才会通过，这才是正确的逻辑：
但是这个验证并不标准，因为此时输入的是email数据吗？不能用简单的空字符串来描述，而应该用正则表达式来计算，那么在JavaScript中正则应用语法：”/^正则标记$/.test(数据)“。
范例：
form.js
window.onload = function(){ //在页面加载之后动态事件绑定
//找到表单元素对象并增加一个提交表单事件
document.getElementById('loginForm').addEventListener("submit",function(){
//找到邮件元素对象
var emailObj = document.getElementById("email");
//取出它的值
// alert(emailObj.value);
if (emailObj.value == "") {
alert("您还有输入登录邮箱，无法登录！");
}else{ //输入正确，理论上应该可以进行提交
alert(emailObj.value);
if (/^\w+@\w+\.\w+$/.test(emailObj.value)) {
this.submit(); //当前元素提交表单
}else{ //验证不通过
alert("请输入合法的EMAIL地址!");
}
}
},false);
}
function f () {
return false;
}
内容为空时：
内容不为空时,但不是邮箱格式时：
内容不为空时，是邮箱格式时：
发现：内容必须存在，而且邮箱格式必须正确，点击确定，表单才会通过：
在整个的submit事件处理中，有一点是非常麻烦的，如果直接在”<form>“元素上使用”onsubmit“事件处理，那么只需要利用”return true|false返回的函数“，那么就可以拦截操作。可是如果是动态事件绑定，那么将无法拦截。
对于”addEventListener(事件类型，事件处理函数，冒泡处理)函数“，如果按照这样的思路，要去解决当前的拦截问题，那么就必须阻止事件向下进行。
准确的完整代码范例：
pass.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content=event.html"">
<meta name="keywords" content="event,html,js"> <body>
<h1>表单验证通过！</h1>
</body>
</html>
form.html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="description" content=event.html"">
<meta name="keywords" content="event,html,js">
<title>javascript的程序开发之表单提交事件处理</title>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<form action="pass.html" method="post" id="loginForm">
<!--在以后的开发过程之中，必须要保证id与name属性内容完全一致，否则会出现怪异问题-->
登录邮箱：<input type="text" name="email" id="email"></input><br>
<button type="submit" id="subBtn">登录</button>
</form>
</body>
</html>
form.js
window.onload = function(){ //在页面加载之后动态事件绑定
//找到表单元素对象并增加一个提交表单事件
document.getElementById('loginForm').addEventListener("submit",function(e){ //e是提交事件
console.log(e); //控制台可以打印出当前执行的事件
//找到邮件元素对象
var emailObj = document.getElementById("email");
//取出它的值
// alert(emailObj.value);
if (emailObj.value == "") {
alert("您还有输入登录邮箱，无法登录！");
if (e && e.preventDefault) { //现在是在W3C标准下执行
e.preventDefault(); //阻止浏览器的动作
}else{ //专门针对于IE浏览器的处理
window.event.returnValue= false;
}
}else{ //输入正确，理论上应该可以进行提交
alert(emailObj.value);
if (/^\w+@\w+\.\w+$/.test(emailObj.value)) {
this.submit(); //当前元素提交表单
}else{ //验证不通过
alert("请输入合法的EMAIL地址!");
if (e && e.preventDefault) { //现在是在W3C标准下执行
e.preventDefault(); //阻止浏览器的动作
}else{ //专门针对于IE浏览器的处理
window.event.returnValue= false;
}
}
}
},false);
}
function submit () {
return false;
}
这种对提交表单的验证方式算是比较完善的了，而且对浏览器进行了兼容，不过这种代码没有通用性。
JavaScript：基础表单验证的更多相关文章
- JavaScript | 基础表单验证（纯Js）
———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
- 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证
封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十二节，封装库--JavaScript，表单验证--年月日注入
封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...
- 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...
- 第一百五十节，封装库--JavaScript，表单验证--密码验证
封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...
- 第一百四十九节，封装库--JavaScript，表单验证--验证用户名
封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...
- js基础-表单验证和提交
基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...
- JavaScript：表单验证模型
之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...
随机推荐
- 解决 PermGen space Tomcat内存设置
转自:http://qwzhl100.blog.163.com/blog/static/2133124200932813148637/ 在 使用Java程序从数据库中查询大量的数据或是应用服务器(如t ...
- javascript 数据类型 变量 类型转换运算符
数据类型: 1.字符串(被双引号所包含的内容),小数,整数,日期时间,布尔型等. 2.变量: 都是通用类型的var, 定义一个变量格式:var a: 3.类型转换: 分为自动转换和强制转换,一般 ...
- 通过JDBC连接hive
hive是大数据技术簇中进行数据仓库应用的基础组件,是其它类似数据仓库应用的对比基准.基础的数据操作我们可以通过脚本方式以hive-client进行处理.若需要开发应用程序,则需要使用hive的jdb ...
- PHP有两个不同的版本:4.x系列版本和5.x系列版本
在为用户提供动态内容方面,PHP和MySQL是一个强大的组合.这些年来,这两项产品已经跨越了它们最初的应用舞台,现在,一些世界上最繁忙的网站也在应用它们.虽然它们当初都是开源软件,只能在UNIX/Li ...
- [转]C# WinForm动态调用远程Web服务
本文转自:http://blog.csdn.net/muyangjun/article/details/7930871 1.添加服务引用 2.在弹出的添加服务引用对话框地址栏中输入WebService ...
- 根据BIOS信息修改主机名
Dell: Rename-Computer -NewName ("CNHZPD-" + (Get-WmiObject -class win32_Bios).SerialNumber ...
- CentOS 6.5下源码安装MySQL 5.6
变量lower_case_file_system说明是否数据目录所在的文件系统对文件名的大小写敏感.ON说明对文件名的大小写不敏感,OFF表示敏感. 在my.cnf中[mysqld]更改lower_c ...
- gridview header增加排序图标
/* add sorting icons to gridview sort links */a.asc:after, a.desc:after { position: relative; top: 1 ...
- Codeforeces 617E XOR and Favorite Number（莫队+小技巧）
E. XOR and Favorite Number time limit per test 4 seconds memory limit per test 256 megabytes input s ...
- 在windows下使用gnu的工具
mingw Minimalist GNU for Windows http://www.mingw.org/ 想要在Windows使用wget,之前使用的是单独的安装包,现在又想使用bash的命令提示 ...