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. 动态绑定AJAX，获取下级分类并延迟执行

    HTML: <div id='allType'> <div class='allTypeHead'><span>所有分类</span></div& ...

  2. leetcode:Palindrome Number【Python版】

    一次AC 题目要求中有空间限制,因此没有采用字符串由量变向中间逐个对比的方法,而是采用计算翻转之后的数字与x是否相等的方法: class Solution: # @return a boolean d ...

  3. asp.net 导出excel的一种方法

    项目用到的一种导出excel 的方法予以记录:(具体的业务类可更具情况替换使用) protected void Export(string filename, List<ComponentCon ...

  4. web 分享代码片段

    <div class="bshare-custom icon-medium-plus"><a title="分享到QQ空间" class=&q ...

  5. MySQL命令行--导入导出数据库

    MySQL命令行导出数据库:   1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录 如我输入的命令行:cd C:\Program Files\MySQL\MySQL Se ...

  6. MySQL中UNSIGNED和ZEROFILL的介绍

    UNSIGNED: 将数字类型无符号化,这与C和C++这些程序语言的unsigned含义相同. INT的类型范围-2 147 483 648~2 147 483 647 INT UNSIGNED范围0 ...

  7. 什么是Base64算法？什么情况下用Base64算法？

    base64 编码的本质:将 8bit 二进制数转化为 6bit 的可打印字符. Base64编码用于需要将二进制数据转为文本数据进行储存和传输的场景. Javascript内部的字符串,都以utf- ...

  8. ZooKeeper 知识点

    zookeeper 命令: 命令 说明 ./zkServer.sh start 启动ZooKeeper(终端执行) ./zkServer.sh stop 停止ZooKeeper(终端执行) ./zkC ...

  9. Openwrt 3G模块的添加

    一. 在menuconfig中添加相关驱动 1. Kernel Modules -> USB Support <*> kmod-usb2 <*> kmod-usb-ohc ...

  10. ssl证书(https) iis 配置安装

    因客户给的 cer的文件 导入提示 失败,所以用 了 客户给的 crt的格式的证书. 安装证书操作如下:iis>>服务器证书>>右侧菜单-完成证书申请>>选择 本文 ...