<!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. npm install 报错:node-pre-gyp ERR! 问题解决

    npm install报错问题解决 问题: E:\CodeSpace\GitlabTest\desktop>npm install > lifeccp-desktop@1.1.9 post ...

  2. Php取扩展名

    Php取扩展名 /** * 取扩展名 */ function getext($url){ $base = parse_url($url); $name = basename($base['path'] ...

  3. Windows下如何安装 Composer

    如何安装 Composer Windows下如何安装 Composer 下载 Composer 安装前请务必确保已经正确安装了 PHP.打开命令行窗口并执行 php -v 查看是否正确输出版本号. 打 ...

  4. linux 安装mysql 5.6.11

    tar zxvf mysql-.tar.gz cd mysql- cmake . -DCMAKE_INSTALL_PREFIX=/home/mysql/ -DMYSQL_DATADIR=/home/m ...

  5. 【Datastage】导出的dsx文件如何统计导出作业个数

    我们在日常使用ds时候,会将很多ds打包导出,例如:有100个作业,现在我们打包导出,但是导出之后如何确认我们是否已经完全导出,会不会在导出的时候漏了一个作业呢? 不用怕! 我们使用编辑打开导出的ds ...

  6. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  7. linuxubuntu升级.net core版本到2.0

    直接看这里 https://www.microsoft.com/net/core#linuxubuntu

  8. html5-本地数据库的操作

    <script src="jquery-1.8.3.js"></script><script>/* IE11不支持此操作创建数据库 解释一下op ...

  9. 数据库出错提示Duplicate entry * for key *的解决方法

    错误编号:1062 错误提示: 查询语句错误] ERR: Duplicate entry ' for key 'PRIMARY' SQL: ' PHP: misc.php: ; IP 问题分析: 向唯 ...

  10. SVN使用（自己总结）

    1.第一次导入,注意要新建个readme.txt文件用于记录版本更改,每次导入时 要填写import message 2.第二次增加文件导入时 勾选未受控版本文件(新增加文件) 完成上传就可更新增加的 ...