html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <meta charset="utf-8">
  6. </head>
  7. <body>
  8.     <form method="post" action="http://www.baidu.com" onsubmit="return check()" >
  9.         姓名:<input type="text" name="uName" id="uName" onblur="checkName();"><span class="message"></span><br/>
  10.         密码:<input type="password" name="uPwd" id="uPwd" onblur="checkPwd()"><span class="message" ></span><br/>
  11.         <input type="submit" value="登录">
  12.     </form>
  13. <script type="text/javascript" src="login.js"></script>
  14. </body>
  15. </html>

JS

  1. function checkName(){
  2.     var uName=document.getElementById("uName")
  3.     var name=uName.value;
  4.     var message=uName.nextSibling;
  5.     if(name.length==0){
  6.         message.innerHTML="用户名不能为空"
  7.     // this.focus();
  8.         return false;
  9.     }else if (name.length<4||name.length>10){
  10.         message.innerHTML="用户名长度为4-10位之间"
  11.         return false;
  12.     }else{
  13.         message.innerHTML="用户名输入正确"
  14.         return true;
  15.     }
  16. }
  17.  
  18. function checkPwd(){
  19.     var uPwd=document.getElementById("uPwd");
  20.     var pwd=uPwd.value;
  21.     var message=uPwd.nextSibling;
  22.     if(pwd.length==0){
  23.         message.innerText="用户密码不能为空"
  24.         return false;
  25.     }else{
  26.         message.innerText="用户密码输入正确"
  27.         return true;
  28.     }
  29. }
  30.  
  31. function check(){
  32. 　　if(checkName()&&checkPwd()){
  33. 　　　　//发送ajax   //操作成功后 返回true  否则返回false
  34. 　}
  35. }

可以通过check这个函数的返回结果控制表单的跳转，为true 才跳转

ajax方式表单拦截的更多相关文章

  1. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  2. lavarel框架中如何使用ajax提交表单

    开门见山,因为laravel以post形式提交数据时候需要加{{csrf_field()}}防止跨站攻击,所以当你用ajax提交表单时候自然也要加 在网上看了很多的解决方式,我是用下面这种方法解决的: ...

  3. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  4. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  5. ajax提交表单序列化（serialize()）数据

    知识点: $("#form").serialize();将表单数据序列化为标准URL编码文本字符串(key1=value1&key2=value2…). 以下用一个例子来演 ...

  6. ajax提交表单、ajax实现文件上传

    ajax提交表单.ajax实现文件上传,有需要的朋友可以参考下. 方式一:利用from表单的targer属性 + 隐藏的iframe 达到类似效果, 支持提交含有文件和普通数据的复杂表单 方式二:使用 ...

  7. 第一百六十节，封装库--JavaScript，ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

  8. 关于ajax提交表单的一些实例及遇到的问题和解决办法

    ajax提交的表单有两种情况: 第一种:input type类型没有file上传文件类型的表单 第二种:input type类型有file上传文件类型的表单 之所以分为两种:是因为原生ajax是不能提 ...

  9. JQuery ajax提交表单及表单验证

    JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

随机推荐

  1. Assert随笔

    ☆ Assert.notNull(haha, "未找到需要导入的计划1");//haha必须不能为null,if为null则抛出message的异常: Assert.hasText ...

  2. 【BZOJ2683】简单题

    cdq分治妙啊 (被改过题面的)原题: dydxh所出的题目是这样的:有一个N*N矩阵,给出一系列的修改和询问,修改是这样的:将(x,y)中的数字加上k,而询问是这样的:求(x1,y1)到(x2,y2 ...

  3. 【HAOI2013】花卉节

    HA果然是弱省中的弱省…… 原题: ZZ市准备在绿博园举办一次花卉节.Dr.Kong接受到一个任务,要买一批花卉进行布置园林.能投入买花卉的资金只有B元 (1 <= B <= 10^18) ...

  4. RPC好，还是RESTful好？

    看到知乎上有这样一个问题 WEB开发中,使用JSON-RPC好,还是RESTful API好? 还有其他优秀的推荐方案吗? -------------------------------------- ...

  5. YUV和RGB之间的转换方法

    yCbCr<-->rgb Y’ = 0.257*R' + 0.504*G' + 0.098*B' + 16 Cb Cr R) G) - 0.392*(Cb'-128) B) 参考: htt ...

  6. MySQL--修改普通表为自增表

    =========================================================== 修改普通表为自增表 将普通表修改为自增表,可分为两种类型: 1.将现有列修改为自 ...

  7. Nginx基础学习

    参考博客: http://www.2cto.com/os/201212/176520.html http://os.51cto.com/art/201111/304611.htm http://www ...

  8. Javascript Array 方法整理

    Javascript Array 方法整理 Javascript 数组相关方法 说明 大多数其它编程语言不允许改变数组大小,越界访问索引会报错,但是 javascript不会报错,不过不建议直接修改a ...

  9. drbd脑裂问题处理

    http://blog.csdn.net/heianemo/article/details/8439813 split brain实际上是指在某种情况下,造成drbd的两个节点断开了连接,都以prim ...

  10. [C++ Primer] : 第16章: 模板与泛型编程

    面向对象编程(OOP)和泛型编程都能处理在编写程序时不知道类型的情况, 不同之处在于: OOP能处理类型在程序运行之前都未知的情况, 而在泛型编程中, 在编译时就能获知类型了. 函数模板 模板是C++ ...