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. hasura graphql 集成pipelinedb测试

    实际上因为pipelinedb 是原生支持pg的,所以应该不存在太大的问题,以下为测试 使用doker-compose 运行 配置 docker-compose 文件 version: '3.6' s ...

  2. [CLPR] 卷积还是相关? - Opencv之filter2D探究

    I am doing something about convolving images in Python and for sake of speed I chose opencv 2.4.9. O ...

  3. asm数据文件迁移(os–>asm)

    --添加测试表空间 SQL> create tablespace xff datafile '/u01/oradata/xifenfei.dbf' size 10m autoextend on ...

  4. ASM 磁盘、目录的管理

    --======================== -- ASM 磁盘.目录的管理 --======================== ASM磁盘是ASM体系结构的重要组成部分,ASM磁盘由ASM ...

  5. java 中的 hashcode

    在Java的Object类中有一个方法: public native int hashCode(); 根据这个方法的声明可知,该方法返回一个int类型的数值,并且是本地方法,因此在Object类中并没 ...

  6. 百度,谷歌,360,搜狗,神马等蜘蛛IP段

    https://www.imydl.com/wzjs/5971.html 记得3月份的时候明月分享过一篇[站长必备:百度.谷歌.搜狗.360等蜘蛛常见IP地址]的文章,好像一直都受到了众多站长们的关注 ...

  7. JFrame 与 Frame

    JFrame是Frame的子类 Frame is part of java.awt package and exists since JDK1.0. JFrame is part of javax.s ...

  8. WPF中控制窗口显示位置的三种方式

    首先新建一个WPF工程,在主界面添加一个按钮,并给按钮添加点击事件button1_Click,然后新建一个用于测试弹出位置的窗口TestWindow.1.在屏幕中间显示,设置window.Window ...

  9. 大快DKhadoop安装教程与常见问题汇总

    上周分别就DKHadoop的安装准备工作以及服务器操作系统配置写了两篇分享的文章,这是个人第一次尝试写一个系统性的分享文章,必然会有很多疏漏的地方,还望见谅吧.今天分享的是DKHadoop安装以及常见 ...

  10. openwrt设置默认登陆密码

    1.修改dropbear配置文件 找到package/network/services/dropbear/files/dropbear.config 修改如下: config dropbear opt ...