在用户填写表单的过程之中，往往需要编写一堆的验证操作，这样就可以保证提交的数据时正确的。那么下面就模拟表单验证的处理操作完成。

如果要想进行验证，首先针对于输入的数据来进行一个验证处理。

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：基础表单验证的更多相关文章

  1. JavaScript | 基础表单验证（纯Js）

    ———————————————————————————————————————————— 基础表单验证(纯js) - - - - - - - - - - - - - - - - - - - - - - ...

  2. 第一百五十四节，封装库--JavaScript，表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  3. 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  4. 第一百五十二节，封装库--JavaScript，表单验证--年月日注入

    封装库--JavaScript,表单验证--年月日注入 效果图 html <div id="reg"> <h2 class="tuo"> ...

  5. 第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全

    封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全 效果图 html <div id="reg"> <h2 class ...

  6. 第一百五十节，封装库--JavaScript，表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  7. 第一百四十九节，封装库--JavaScript，表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  8. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  9. JavaScript：表单验证模型

    之前做的验证提示以弹框的形式出现太丑陋了,不符合标准的验证提示.如果要想进行更好的数据验证操作,那么必须进行一些模块化设计,通过表单样式的改变来提示.其实,一般的数据验证无非就是那么几种,例如: 大多 ...

随机推荐

  1. Area Under roc Curve(AUC)

    AUC是一种用来度量分类模型好坏的一个标准. ROC分析是从医疗分析领域引入了一种新的分类模型performance评判方法. ROC的全名叫做Receiver Operating Character ...

  2. 通过程序校验xml文档学习笔记

    校验xml文档,可以通过程序来校验,利用一段js代码即可. 各行代码的含义已经写出,运行这个html文件,检验如下xml代码: 结果如下: 如果xml文档出现错误: 结果如下: 其中,obj.asyn ...

  3. IDM 通过防火墙规则阻止激活验证

    1. 打开Windows防火墙 2. 高级设置-->出站规则-->新建规则 3. 添加IDM程序路径,阻止连接 4. 在属性中添加作用域,远程IP地址: DNS解析出IP:register ...

  4. (一)win7下cocos2d-x 21 + vs2010

    1.下载SDK http://cocos2d.cocoachina.com/download,我下载2.1版本,cocos2d-2.1rc0-x-2.1.2-hotfix.zip @ Apr.08, ...

  5. xenserver+starwind架构布署

    主机 CPU 和主板均需支持 INTER-VT/ AMD-VT ,主板默认可能没开  进BISO开启  下载最新的 xenserver ,授权注册一下 轻松得到授权文件 (鄙视一下VMWARE,看人家 ...

  6. Bootstrap页面布局8 - BS常用标签与样式

    常用的Css文字标签 一. <p>文字段落Start,<strong>重要的文字</strong>,<em>倾斜的文字用来提示</em>,& ...

  7. url如何传递参数

    $(document).ready(function() { var name=getQueryString('minename'); if (name != null && name ...

  8. java 形参实参

    java方法中传值和传引用的问题是个基本问题,但是也有很多人一时弄不清. (一)基本数据类型:传值,方法不会改变实参的值. public class TestFun { public static v ...

  9. android 定位的四种方式

    [原文]  开发中对于地图及地理位置的定位是我们经常要用地,地图功能的使用使得我们应用功能更加完善,下面总结了一下网络中现有对于介绍android定位的4种方式,希望对大家有帮助: android 定 ...

  10. JVM内存配置

    JVM内存主要分为两个部分,分别是PermanentSapce和HeapSpace. PermantSpace主要负责存放加载的Class类级对象如class本身,method,field等反射对象, ...