<!DOCTYPE html>
<html>
<head>
    <title>Simple Login Form</title>
    <meta charset="UTF-8" />
    <meta name="Designer" content="PremiumPixels.com">
    <meta name="Author" content="$hekh@r d-Ziner, CSSJUNTION.com">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/structure.css">

    <link href="../Scripts/easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="../Scripts/easyui/themes/icon.css" rel="stylesheet" />
    <link href="../Scripts/easyui/demo/demo.css" rel="stylesheet" />
</head>

<body>
    <form id="login_form" class="box login">
        <fieldset class="boxBody">
            <label>用户名</label>
            <input id="userId" type="text" tabindex="1" placeholder="" required>
            <label><a href="#" class="rLink" tabindex="5"></a>密码</label>
            <input id="userPwd" type="password" tabindex="2" required>
        </fieldset>
        <footer>
            <input  type="submit" class="btnLogin" value="登 录" tabindex="4">
        </footer>
    </form>
    <footer id="main">
        <a href="http://wwww.cssjunction.com">新烽光电股份有限公司</a> | <a href="http://www.premiumpixels.com">制作 by 软件部</a>
    </footer>
</body>
</html>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../Scripts/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../Scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
<script>
    document.getElementById("login_form").onsubmit = function () {
        requiredCheck();
        return false;
    };
    function requiredCheck() {
        var userModel = {
            userId: $.trim($("#userId").val()),
            userPwd: $.trim($("#userPwd").val())
        };
        for (var i in userModel) {
            if (userModel.hasOwnProperty(i)) {
                if (userModel[i] == "") {
                    $.messager.alert('提示', '用户名或密码不能为空', "error");
                    return false;
                }
            }
        }
        $.post("/Login/LoginCheck.ashx", userModel, function (msg) {
            if (msg.code == 0) {
                $.messager.alert('提示', msg.result, "error");
            } else {
                window.location.href = "/index.aspx";
            }
        });
      
    }
</script>

注意: 注册form表单的onsubmit事件，return false(在事件处理函数(onsubmit)里面return false)来阻止表单提交,

js阻止表单提交的更多相关文章

  1. 利用JS 阻止表单提交

    情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...

  2. js阻止表单提交的两种方法

    下面直接看代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. 利用js阻止表单提交

    (1) return false <form name="loginForm" action="login.aspx" method="post ...

  4. jsp——js事件修改属性样式的两种方法（直接赋值、修改属性）、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存

    代码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncodi ...

  5. js 在表单提交前进行操作

    最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了2种阻止表单提交的方法,可以进行一些逻辑处理 方法一:使用return false 原生js写法: <form id=&q ...

  6. form表单验证失败，阻止表单提交

    form表单验证失败,阻止表单提交 效果演示: 贴上完整代码: <!DOCTYPE html> <html lang="en"> <head> ...

  7. Javascript阻止表单提交

    Javascript阻止表单提交 Html 1.<form name="loginForm" action="login.aspx" method=&qu ...

  8. onsubmit阻止表单提交

    在实际开发中往往会遇到检查表单数据的合法性,如果数据不合法,就不让其提交. <!DOCTYPE html> <html> <head> <meta chars ...

  9. JQuery阻止表单提交的方法总结 - 使用onsubmit()验证表单并阻止非法提交

    方法1:<form onsubmit="javascript:confirm()"> 方法内返回false阻止表单提交 示例:代码检测textarea内填写的长度,未填 ...

随机推荐

  1. Hibernate关系映射（三） 多对多

    一.使用用户User和Role实现多对多的示例 User.java,实现对Role的引用 package com.lxit.entity; import java.util.HashSet; impo ...

  2. 如何查看LoadRunner虚拟用户(vuser)类型

    查看vuser类型LoadRunner提供了多种Vuser技术,通过这些技术可以在使用不同类型的客户端/服务器体系结构时生成服务器负载.每种Vuser技术都适合于特定体系结构并产生特定的Vuser类型 ...

  3. Shell 传递参数（转）

    我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 实例 以下实例我们向脚本传递三 ...

  4. DRUPAL性能优化【转】

    1.启用memcache代替Mysql的缓存表处理缓存数据. 2.添加一个opcode缓存可以让 PHP能够重用前面编译过的代码,这样就会跳过解析和编译.常见的opcode缓存有Alternative ...

  5. Linux内核分析：实验八--Linux进程调度与切换

    刘畅 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 概述 这篇文章主要分析Li ...

  6. HTML-HTML5+CSS3权威指南阅读（四、媒体查询）

    1.媒体类型 HTML 4和CSS 2目前支持为不同的媒体类型设定专有的样式表, 比如, 一个页面在屏幕上显示时使用无衬线字体, 而在打印时则使用衬线字体, screen 和 print 是两种已定义 ...

  7. sql server使用sql插入中文字符串乱码问题

    在插入语句前加N就行了 sb.Append(string.Format("update chapter set [content]=N'{0}' where Id ={1} ;", ...

  8. mongodb - Replication Set搭建过程

    1.创建目录 mkdir -p /mongodb/data/r1 mkdir -p /mongodb/data/r2 mkdir -p /mongodb/data/r3 mkdir -p /mongo ...

  9. Linux 基础学习（第二节）

    free命令用于显示当前系统中内存的使用量信息,格式为:“free [-h]”. 为了保证Linux系统不会突然卡住宕机,因此内存使用量应该是运维人员时刻要关注的数据啦,咱们可以使用-h参数来以更人性 ...

  10. php_memcahed telnet远程操作方法

    一.存储命令 存储命令的格式: <command name> <key> <flags> <exptime> <bytes> <dat ...