html

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8">

</head>

<body>

    <form method="post" action="http://www.baidu.com" onsubmit="return check()" >

        姓名:<input type="text" name="uName" id="uName" onblur="checkName();"><span class="message"></span><br/>

        密码:<input type="password" name="uPwd" id="uPwd" onblur="checkPwd()"><span class="message" ></span><br/>

        <input type="submit" value="登录">

    </form>

<script type="text/javascript" src="login.js"></script>

</body>

</html>

JS

function checkName(){

    var uName=document.getElementById("uName")

    var name=uName.value;

    var message=uName.nextSibling;

    if(name.length==0){

        message.innerHTML="用户名不能为空"

    // this.focus();

        return false;

    }else if (name.length<4||name.length>10){

        message.innerHTML="用户名长度为4-10位之间"

        return false;

    }else{

        message.innerHTML="用户名输入正确"

        return true;

    }

}

function checkPwd(){

    var uPwd=document.getElementById("uPwd");

    var pwd=uPwd.value;

    var message=uPwd.nextSibling;

    if(pwd.length==0){

        message.innerText="用户密码不能为空"

        return false;

    }else{

        message.innerText="用户密码输入正确"

        return true;

    }

}

function check(){

　　if(checkName()&&checkPwd()){

　　　　//发送ajax   //操作成功后 返回true  否则返回false

　}

}

可以通过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. streamsets 集成 cratedb 测试

    我们可以集成crate 到streamsets 中可以实现强大的数据导入,数据分析能力. 演示的是进行csv 文件的解析并输出到cratedb 环境使用docker && docker ...

  2. php重新整理数组索引

    语法 array_merge(array1,array2,array3...) 参数 描述 array1 必需.输入的第一个数组. array2 必需.输入的第二个数组. array3 可选.可指定的 ...

  3. PYTHON之MOCK WEB接口

    在日常的测试工作中,有时会有需要调用外部接口,拿到返回数据用以满足当前的测试任务的需求.但是当外部接口不可用,或者没有提供测试用环境时,我们就需要自己来mock一个接口的返回内容了,先让我们看一看下面 ...

  4. VSCODE includePath 中使用系统中的变量

    使用 ${env.ENVNAME}  这样只需要在 系统中加一个系统变量就可以. https://github.com/Microsoft/vscode-cpptools/issues/697

  5. 让node支持es模块化(export、import)的方法

    node版本v7.9.0,支持了大部分es6的功能,但还不支持es6模块化(export.import). 检测ES6 可以使用es-checker来检测当前Node.js对ES6的支持情况. 使用命 ...

  6. java 中一些需要注意的知识点

    java数组的length属性是容量,而不是数组真实元素的个数: 多线程中的interrupt()方法并不会终止处于"运行状态"的线程,它只是将线程的中断标记设为true. juc ...

  7. Hadoop集群环境搭建步骤说明

    Hadoop集群环境搭建是很多学习hadoop学习者或者是使用者都必然要面对的一个问题,网上关于hadoop集群环境搭建的博文教程也蛮多的.对于玩hadoop的高手来说肯定没有什么问题,甚至可以说事“ ...

  8. MySQL的结构图

    MySQL的结构图 为了更好的了解和配置MySQL,就必须先了解一下MySQL的体系结构.如下图所示: ▲MySQL体系架构图 理解MySQL的体系架构对于成功的配置和调试至关重要.以下将对架构图进行 ...

  9. 判断真实ip

            #region 获取真实ip        /// <summary>        /// 获取真实ip        /// </summary>      ...

  10. vs 2017/2015/2013 如何定位C++内存泄漏

    定位内存泄漏是C++的一个大问题 我们可以通过如下方式进行定位: //在主函数文件中加入如下代码 #include <stdlib.h> #include <crtdbg.h> ...