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. 视觉惯性里程计Visual–Inertial Odometry(VIO)概述

    周围很多朋友开始做vio了,之前在知乎上也和胖爷讨论过这个问题,本文主要来自于知乎的讨论. 来自https://www.zhihu.com/question/53571648/answer/13772 ...

  2. django中的FBV和CBV

    django中请求处理方式有2种:FBV 和 CBV 一.FBV FBV(function base views) 就是在视图里使用函数处理请求. 看代码: urls.py from django.c ...

  3. Java JDK 版本的区别

    jdk6和jdk5相比的新特性有: 1.instrumentation 在 Java SE 6 里面,instrumentation 包被赋予了更强大的功能:启动后的 instrument.本地代码 ...

  4. python Django Nginx+ uWSGI 安装配置

    环境: CentOS7.python-3.5.3.Nignx 1.10.3 .Django 1.10.6.uWSGI 2.0.14 django项目目录:/var/webRoot/p1 项目结构: 基 ...

  5. nginx反向代理解决跨域问题

    跨域:浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 . 下表格为前后端分离的域名,技术信息:   域名 服务器 使用技术 前端 http://b.yynf.com ...

  6. oracle_外部表的两种实现方式oracle_loader[datapump]

    外部表可以实现,通过数据库对象直接访问目录文件里的格式数据,加载方式分为两种oracle_loader和oracle_datapump,oracle_loader方式通过sqlldr引擎方式加载,访问 ...

  7. .net与com组件

    在使用.net中注册组件,有三种方式: 1.手动注册: win9x/NT/2000系统提供一个用于注册进程内组件的实用工具RegSvr32.exe,如regsvr32 c:\test.dll:在.NE ...

  8. bzoj4161: Shlw loves matrixI

    Description 给定数列 {hn}前k项,其后每一项满足 hn = a1*h(n-1) + a2*h(n-2) + ... + ak*h(n-k) 其中 a1,a2...ak 为给定数列.请计 ...

  9. mysql分区表之一：分区原理和优缺点【转】

    1.分区表的原理 分区表是由多个相关的底层表实现,这些底层表也是由句柄对象表示,所以我们也可以直接访问各个分区,存储引擎管理分区的各个底层表和管理普通表一样(所有的底层表都必须使用相同的存储引擎),分 ...

  10. Jmeter接口压测

    对于各个组件的使用,建议参考官方文档 1. Jmeter参数化,从txt文件读取. 1.txt