<!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. JMeter 十六：加密处理

    假设采用MD5进行加密 JMeter 内置的没有MD5加密方法.网上有说采用__MD5函数的,但是我在 Jmeter 2.13 以及 Jmeter 3.2 版本上都没有找到这个函数,官方文档也没有看到 ...

  2. 详细解说 STL 排序(Sort)（转）

    作者Winter 详细解说 STL 排序(Sort) 0 前言: STL,为什么你必须掌握 1 STL提供的Sort 算法 1.1 所有sort算法介绍 1.2 sort 中的比较函数 1.3 sor ...

  3. 在进程中执行新代码 execl、execle、execlp、execv、execve和execvp函数

    摘要:本文主要讲述怎样在进程中执行新代码,以及exec系列函数的基本用法. 在进程中执行新代码 用函数fork创建子进程后,假设希望在当前子进程中运行新的程序,能够调用exec函数运行还有一个程序.当 ...

  4. 最接近WeChat的全屏自定义相机(Custom Camera)

    代码地址如下:http://www.demodashi.com/demo/13271.html 一.需求 最接近WeChat的全屏自定义相机(Custom Camera),拍照和预览都是全屏尺寸.使用 ...

  5. Spring3.0官网文档学习笔记（四）--3.1~3.2.3

    3.1 Spring IoC容器与Beans简单介绍     BeanFactory接口提供对随意对象的配置:     ApplicationContext是BeanFactory的子接口.整合了Sp ...

  6. Ubuntu 18.04修改IP地址

    注:配置/etc/network/interfaces已无用 root@ubuntu:~# vim /etc/netplan/50-cloud-init.yaml network: ethernets ...

  7. unity, Global和Local编辑模式

    下图表示是在Local模式下: 下图表示是在Global模式下: 不要搞反.

  8. AngularJS体验式编程系列文章

    AngularJS体验式编程系列文章,将介绍如何用angularjs构建一个强大的web前端系统.angularjs是由Google团队开发的一款非常优秀web前端框架.在当前如此多的web框架下,a ...

  9. Mono源码学习笔记:Console类(三)

    Buffer 类 (public static class) 以下就是 mcs/class/corlib/System/Buffer.cs: 001: // 002: // System.Buffer ...

  10. Atitit.常用分区api的attilax总结

    Atitit.常用分区api的attilax总结 1. Api 来源与oracle与mysql1 1.1. 分区定义partition by range (uid)  使用VALUES LESS TH ...