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. ImageCollection

    https://documentation.devexpress.com/#WindowsForms/clsDevExpressUtilsImageCollectiontopic The collec ...

  2. 解决 php提交表单到当前页面，刷新会重复提交 的问题

    http://blog.csdn.net/u012466451/article/details/68952280

  3. web上传照片

    .toDataURL() FileReader对象也有类似的方法,比如.readAsDataURL(),然而它只接受file或blob类型,而这两种类型一般只能通过<input[type=fil ...

  4. Spring插件3.8.2的安装

    主机环境:win8 64bit eclipse版本:4.5.2 MARS 插件版本:Spring Tool Suite3.8.2 安装过程:直接在线安装,没有先在官网把插件下载再安装. 主要步骤: 1 ...

  5. JVM监控

    jconsole 说明: 首先JConsole这个是JDK里面自带的工具  在JAVA_HOME/bin目录下,今天主要测试远程监控JVM 第一步:设置好需要远程机器的Tomcat 修改Tomcat下 ...

  6. 01.ubuntu14.04安装HI3518EV200 SDK的过程

    转载,侵删 1.海思SDK安装编译 Hi3518EV200_SDK是基于Hi3518EV200_DMEB的软件开发包,包含了在Linux相关应用开发时使用的各种工具及其源代码,是用户开发中最基本的软件 ...

  7. Oracle误删除表空间的恢复

    对于误删除表空间的恢复,本文通过基于数据库的时间点恢复和基于表空间的时间点恢复分别加以讨论 一 通过基于数据库的时间点恢复被误删除的表空间 1 需要注意的事项 a 基于数据库的时间点恢复将会回退整个数 ...

  8. Map 的营救；使对象属性有顺序

    使用ES6的新特性Map.Map 对象以插入的顺序遍历元素.for...of循环为每一次循环返回一个[key, value]数组. 如果想在跨浏览器环境中模拟一个有序的关联数组,你要么使用两个分开的数 ...

  9. 数独求解程序 php版

    数独求解程序 php版 <?php class Sudoku { var $matrix; function __construct($arr = null) { if ($arr == nul ...

  10. MapReduce-线性回归

    线性回归有是三个值很重要: 1. 斜率 2. 截距:x和y轴的交点值: 3. 显著性:数据偏离线性的程度,用以判断数据可以用线性表示的程度:拟合度   apache.commons.math3里面有一 ...