1.form的两个事件

submit,提交表单,如果直接调用该函数,则直接提交表单

onSubmit,提交按钮点击时先触发,然后触发submit事件。如果不加控制的话,默认返回true,因此表单总能提交。

2. JS的校验

通过在JS中用document.myform.name.value,来得到用户的每一个输入 ,进行校验,当完全通过时,返回TRUE,反之返回false。

3. 页面代码实现

/*

<form name="testform"  action="hello.html"  method="post" onSubmit="return check();">

<input type="text" name="name">

<input type="submit" value="提交">

</form>

*/

4. JS的实现

function check(){
    if (document.testform.name.value=="admin")    {       
        alert("姓名不正确");       
        return false;   
        }
    else{
        return true;
        }
}

5.说明

这里注意onSubmit的写法,千万不要写成:“check()”,这样当检验不能通过的时候不会提交表单。

第一种:

复制代码 代码如下:

<script type="text/javascript">
         function check(form) {

          if(form.userId.value=='') {
                alert("请输入用户帐号!");
                form.userId.focus();
                return false;
           }
       if(form.password.value==''){
                alert("请输入登录密码!");
                form.password.focus();
                return false;
         }
         return true;
         }
</script>

<form action="login.do?act=login" method="post">
用户帐号
  <input type=text name="userId" size="18" value="" >
<br>
 登录密码     
<input type="password" name="password" size="19" value=""/>     
 <input type=submit name="submit1" value="登陆" onclick="return check(this.form)">

</form>

第二种

复制代码 代码如下:

<script type="text/javascript">
         function check(form) {

          if(form.userId.value=='') {
                alert("请输入用户帐号!");
                form.userId.focus();
                return false;
           }
       if(form.password.value==''){
                alert("请输入登录密码!");
                form.password.focus();
                return false;
         }
         return true;
         }
</script>

<form action="login.do?act=login" method="post" onsubmit="return check(this)">
用户帐号
  <input type=text name="userId" size="18" value="" >
<br>
 登录密码     
<input type="password" name="password" size="19" value=""/>     
 <input type=submit name="submit1" value="登陆">

</form>

第三种:

复制代码 代码如下:

<script type="text/javascript">
         function check(form) {

          if(form.userId.value=='') {
                alert("请输入用户帐号!");
                form.userId.focus();
                return false;
           }
       if(form.password.value==''){
                alert("请输入登录密码!");
                form.password.focus();
                return false;
         }

          document.myform.submit();
}
</script>

<form action="login.do?act=login" name="myform" method="post">
用户帐号
  <input type=text name="userId" size="18" value="" >
<br>
 登录密码     
<input type="password" name="password" size="19" value=""/>     
<input type=button name="submit1" value="登陆" onclick="check(this.form)">

</form>

使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结的更多相关文章

  1. 使用JS对form的内容验证失败后阻止提交

    1.form的两个事件 submit,提交表单,如果直接调用该函数,则直接提交表单 onSubmit,提交按钮点击时先触发,然后触发submit事件.如果不加控制的话,默认返回true,因此表单总能提 ...

  2. form表单验证失败,阻止表单提交

    form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...

  3. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  4. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  5. js二维数组定义和初始化的三种方法总结

    js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...

  6. 应对加密js的三种方法

    经常遇到网页在登录后会对用户输入的帐号和密码通过js进行加密,导致模拟登录这类网站时受到阻碍 这里小记一下当前解决该问题的三种方法 1.利用python实现js同等加密. 2.利用selenium模拟 ...

  7. (转)在网页中JS函数自动执行常用三种方法

    原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...

  8. JS模拟实现封装的三种方法

      前  言  继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧. 1.在 Object类上 ...

  9. HTML5结合CSS的三种方法+结合JS的三种方法

    HTML5+CSS: HTML中应用CSS的三种方法 一.内联 内联样式通过style属性直接套进HTML中去. 示例代码 <pstylepstyle="color:red" ...

随机推荐

  1. 【转】非常适用的Sourceinsight插件,提高效率事半功倍

    原文网址:http://www.cnblogs.com/wangqiguo/p/3713211.html 一直使用sourceinsight编辑C/C++代码,sourceinsight是一个非常好用 ...

  2. java枚举实例

    实例一: public enum OrderOption {ASC,DESC; } 实例二(带参数构造函数): public enum OrderOption { ASC("ASC" ...

  3. Intel MKL函数,如何得到相同的计算结果?【转】

    在运行程序时,我们总希望多次运行的结果,是完全一致,甚至在不同的机器与不同的OS中,程序运行的结果每一位都完全相同. 事实上,程序往往很难保证做到这一点. 为什么呢? 我们先看一个简单的例子: 当程序 ...

  4. PHP使用libevent实现高性能httpServer

    今天发现php也有一个libevent的扩展,安装后尝试下了一个webserver(httpserver), 发现性能还不错,逻辑很简单,每秒响应速度1800~4000次/s 代码如下 <?ph ...

  5. ABBYY PDF Transformer+从文件选项中创建PDF文档的教程

    可使用OCR文字识别软件ABBYY PDF Transformer+从Microsoft Word.Microsoft Excel.Microsoft PowerPoint.HTML.RTF.Micr ...

  6. ThreadContext

    //#define UseThreadContext using System; using System.Collections.Generic; using System.Linq; using ...

  7. Smarty 由 2.X升级到3.X遇到的问题

    首先这是一个大概4年前做的PHP项目,使用的是Zend Framework 1 + Smarty 2 , 已经很多年没有动过了, 最近抽风了,把这个项目要玩改版.拿出来改改吧. ZF 升级2这事,还是 ...

  8. sublime个人快捷键

    ctrl+alt+f  =  代码格式化(html,js) ctrl+d  =  选中相同内容 alt+shift+w  =  为内容添加新标签 ctrl+shift+a = 选择标签内的内容(再按一 ...

  9. 找不到所需要的ndbm.h头文件

    具体描述: 通过deb包安装gdbm之后,发现找不到所需要的ndbm.h头文件.但是你会发现一个叫gdbm-ndbm.h的文件,你只需要把文件名改成ndbm.h就可以了,当然需要一定权限. sudo ...

  10. android数据存储之Sqlite(一)

    SQLite学习笔记 1. Sqlite简介 SQLite是一款轻型的数据库,是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入 式的,而且目前已经在很多嵌入式产品中使用了它,它占用资源非常的低 ...