<!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. js 立即执行函数定义方法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. 【VB编程】05.MsgBox与InputBox函数

    在VBA程序中,数据的输入输出是通过函数实现的,其实现的方式是通过对话框的形式表示出来的.例如MsgBox,Inputbox等,不要误认为是输入输出语句的关键字,其实仅仅是一个普通函数而已. [Msg ...

  3. Python 的__name__属性

    Python 的__name__属性: 一个模块被另一个程序第一次引入时,其主程序将运行. 如果我们想在模块被引入时,模块中的某一程序块不执行,我们可以用__name__属性来使该程序块仅在该模块自身 ...

  4. Linux 下Tomcat的启动、关闭、杀死进程

    Linux下Tomcat的启动.关闭.杀死进程 打开终端 cd /java/tomcat #执行 bin/startup.sh #启动tomcat bin/shutdown.sh #停止tomcat ...

  5. sql server 使用for xml path 将1列多行转换为字符串连接起来

    create table tb ([id] )) insert into tb ,'aa' union all ,'bb' union all ,'cc' union all ,'dd' union ...

  6. iOS10相册相机闪退bug

    iOS10系统下调用系统相册.相机功能,遇到闪退的情况,描述如下: This app has crashed because it attempted to access privacy-sensit ...

  7. ClientViaBehavior行为

    ClientViaBehavior行为: 紧接红框:方式,也支持配置的应用方式

  8. MySQL之desc查看表结构的详细信息

    在mysql中如果想要查看表的定义的话:有如下方式可供选择 1.show create table 语句: show create table table_name; 2.desc table_nam ...

  9. c++ 返回对象的引用要小心

    除非能保证返回对象的生命周期足够长. 一定不要返回临时对象的引用.

  10. PHP系统学习3 正则

    正则 ^shop 标示匹配与shop开头的字符串 shop$用来匹配与shop结尾的字符串 ^shop$只匹配shop [a-z]匹配所有小写字母 [A-Z]匹配所有大写字母 [a-zA-Z]匹配所有 ...