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()”,这样当检验不能通过的时候不会提交表单。

使用JS对form的内容验证失败后阻止提交的更多相关文章

  1. 使用JS对form的内容验证失败后阻止提交 &&js校验表单后提交表单的三种方法总结

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

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

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

  3. ASP.NET MVC 客户端验证失败后表单仍然提交问题

    客户端验证失败后表单仍然提交问题!导致页面刷新,辛辛苦苦输入的内容荡然无存. 多么奇怪的问题.按道理,验证失败,就应该显示各种错误信息,不会提交表单才对.而现在,错误信息正常显示,但页面却刷新了一遍. ...

  4. ElementUi 表单验证失败后 页面滚动到表单验证失败位置

    1.应用场景 当进行长表单验证时 用户填写到了单子的最下面 可是已经滚动过去的部分单子验证失败 为了友好的用户体验 这时候就需要滚动到验证失败位置 2.解决思路 elementUi本身并没有提供相关获 ...

  5. 转:MVC2表单验证失败后,直接返回View,已填写的内容就会清空,可以这样做;MVC2输出文本;MVC2输出PDF文件

    ViewData.ModelState.AddModelError("FormValidator", message); foreach (string field in Requ ...

  6. jquery实现表单验证,所以的验证通过后方可提交

    <html>     <head>         <meta http-equiv="content-type" content="tex ...

  7. JS实现的一个验证码,可以在前端验证后在提交action

    js实现的一个验证码功能,可以在前端判断验证码输入是否正确 输入的邮箱格式是否正确 验证成功后才提交action到后台 <!DOCTYPE html PUBLIC "-//W3C//D ...

  8. Day19 Django之Form表单验证、CSRF、Cookie、Session和Model操作

    一.Form表单验证 用于做用户提交数据的验证1.自定义规则 a.自定义规则(类,字段名==html中的name值)b.数据提交-规则进行匹配代码如下: """day19 ...

  9. ASP.NET MVC Form表单验证与Authorize特性

    一.Form表单验证 1.基本概念 表单验证是一个基于票据(ticket-based)[也称为基于令牌(token-based)]的系统.当用户登录系统以后,会得到一个包含基于用户信息的票据(tick ...

随机推荐

  1. Linux命令-自动挂载文件/etc/fstab功能详解

    Linux命令-自动挂载文件etcfstab功能详解 一./etc/fstab文件的作用 磁盘被手动挂载之后都必须把挂载信息写入/etc/fstab这个文件中,否则下次开机启动时仍然需要重新挂载. 系 ...

  2. composer 加快更新速度

    一.使用代理 set http_proxy=http://127.0.0.1:8087 //Windows export http_proxy=http://127.0.0.1:8087 //linu ...

  3. 积分图像 分类: 图像处理 Matlab 2015-06-06 10:30 149人阅读 评论(0) 收藏

    积分图像(integral image)是一种快速计算矩形区域之和的数据结构,常利用它对算法进行加速.积分图像中处的值是原始灰度图像的左上角与当前点所围成的矩形区域内所有像素点的灰度值之和,即: 其中 ...

  4. Android开发学习——ButterKnife使用

    为了码代码的效率,我们有了ButterKnife;其基本使用如下步骤: 1.在Android Studio的Setting中,下载plugin 2.在整个Project的build.gradle中添加 ...

  5. SpringMVC -- 必知必会

    SpringMVC基于模型--视图--控制器(Model-View-Controller,MVC)模式实现,属于SpringFrameWork的后续产品,已经融合在SpringWebFlow里面.它通 ...

  6. Android学习笔记-事件处理之Handler消息传递机制

    内容摘要:Android Handler消息传递机制的学习总结.问题记录 Handler消息传递机制的目的: 1.实现线程间通信(如:Android平台只允许主线程(UI线程)修改Activity里的 ...

  7. Django model 反向引用中的related_name

    转自:https://blog.csdn.net/lanyang123456/article/details/68962515 问题: 定义表Apple: class Apple( models.Mo ...

  8. web.xml 加载顺序

    参考网址: 上下文对象>监听>过滤器>servlet 1.先加载上下文对象 <!-- 初始化Spring classpath*:spring/applicationContex ...

  9. iOS Programming Auto Layout: Programmatic Constraints 自动布局:通过编程限制

    iOS Programming  Auto Layout: Programmatic Constraints  1.  However, if your views are created in co ...

  10. node.js入门之三

    Node.js REPL(交互式解释器) Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux ...