1、效果

说明：1、界面不太美观 这里面主要是包括 利用jQuery 插件validate验证form字段，jQuery提交form表单的方式

1、HTML代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="Easyui/themes/default/easyui.css" rel="stylesheet" />

    <link href="Easyui/themes/icon.css" rel="stylesheet" />

    <script src="Easyui/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="Easyui/jquery.easyui.min.js"></script>

    <script src="Easyui/locale/easyui-lang-zh_CN.js"></script>

    <script src="JS/jquery.validate.min.js"></script>

    <script src="JS/jquery.form.js"></script>

    <style type="text/css">

        .div1

        {

            width:350px;

            height:160px;

        }

        td

        {

            text-align:right;

        }

        .input1

        {

            width:180px;

        }

    </style>

</head>

<body>

    <form id="form1" runat="server">

               <input type="hidden" name="userId" value=""/>

    <div class="div1">

        <table>

             <tr><td>用户名：</td><td><input class="input1" type="text" id="userName" name="userName" value="" /></td></tr>

              <tr><td>旧密码：</td><td><input class="input1" type="password" id="pwd" name="pwd" value="" /></td></tr>

              <tr><td>新密码：</td><td><input class="input1" type="password" id="NewPwd" name="NewPwd" value="" /></td></tr>

              <tr><td>确认新密码：</td><td><input class="input1" type="password" id="confirmPwd" name="confirmPwd" value="" /></td></tr>

              <tr><td id="btnCaoZuo" style="padding-right:20px;width:160px;" colspan="2">

                  <input type="button" style="width:80px;margin-right:15px;" onclick="test()" value ="保存" />

                  <input type="button" style="width:80px;" value="取消" /></td></tr>

        </table>

    </div>

    </form>

</body>

</html>

    <script type="text/javascript">

        function check_form() {

            return $("#form1").validate({

                rules: {

                    userName: {

                        required: true,

                        minlength: 2

                    },

                    NewPwd: {

                        required: true,

                        minlength: 6,

                        maxlength: 20,

                    },

                    confirmPwd: {

                        required: true,

                        minlength: 6,

                        maxlength: 20,

                        equalTo: "#NewPwd"

                    }

                },

                messages: {

                    userName: {

                        required: "请输入用户名",

                        minlength: "用户名必需由两个字母组成"

                    },

                    NewPwd: {

                        required: "请输入密码",

                        minlength: "密码长度不能小于 6 个字母",

                        maxlength: "密码长度不能多于 20 个字母",

                    },

                    confirmPwd: {

                        required: "请输入密码",

                        minlength: "密码长度不能小于 6 个字母",

                        maxlength: "密码长度不能多于 20 个字母",

                        equalTo: "两次密码输入不一致"

                    }

                }

            });

        }

        function test()

        {

            if (check_form().form()) {

                var f = $('#form1');

                f.form('submit', {

                    url: 'Home/ChangePWD',

                    type: 'post',

                    success: function (data) {

                        var json = $.parseJSON(data);

                        if (json.id == 1) {

                        }

                    },

                    error: function (data) {

                    }

                });

                return true;

            } else {

                return false;

            }

        }

    </script>

2、Home控制器 代码

        public ActionResult ChangePWD()

        {

            ResultModel re = new ResultModel();

            string userName = Request["userName"].ToString();

            re.id = ;

            re.stName = "修改成功！";

            return Json(re, JsonRequestBehavior.AllowGet);

        }

3、引用的Easyui 及js源文件下载地址

链接：https://pan.baidu.com/s/1UDrd5KKB4kN3tN_0CotA4A 密码：tctv

asp.net mvc4 修改密码界面的更多相关文章

  1. Dynamics CRM修改密码界面

    我们再实施Dynamics CRM的过程中经常会被客户吐槽没有一个修改密码的页面.市面上也有一些人通过自己操作AD库进行修改密码的解决方案不过多多少少会有一些BUG存在.其实ADFS提供了一个修改密码 ...

  2. asp.net membership 修改密码

    aspnet_Applications 存储数据库所涉及应用程序有关信息. aspnet_Membership 存储与用户相关信息例如:用户登陆密码,创建时间. aspnet_Paths 存储应用程序 ...

  3. winform设计一个登录界面和修改密码的界面-自动切换窗体（问题[已解] 望一起讨论）(技术改变世界-cnblog)

    http://www.cnblogs.com/IAmBetter/archive/2012/01/14/2322156.html winform设计一个登录界面和修改密码的界面-自动切换窗体(问题[已 ...

  4. C#_会员管理系统：开发三（修改密码）

    为以后多个功能界面考虑,新增一个主界面: 主界面如下: 主界面(VIPMain.cs)详细代码如下: using System; using System.Collections.Generic; u ...

  5. 31、Flask实战第31天：cms后台修改密码

    cms后台修改密码界面布局 先创建cms_resetpwd.html页面,继承cms_base.html {% extends 'cms/cms_base.html' %} {% block titl ...

  6. vue-element添加修改密码弹窗

    1.新建修改密码vue文件CgPwd.vue 代码如下: <template> <!-- 修改密码界面 --> <el-dialog :title="$t('c ...

  7. 在ASP.NET MVC4中实现同页面增删改查,无弹出框02,增删改查界面设计

    在上一篇"在ASP.NET MVC4中实现同页面增删改查,无弹出框01,Repository的搭建"中,已经搭建好了Repository层,本篇就剩下增删改查的界面了......今 ...

  8. asp.net mvc4 登录界面

    说明:开发环境 asp.net mvc4 c#语言 1.项目目录结构 2.Login控制器中 public ActionResult Index() { return View(); } 对应Inde ...

  9. ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分（3）修改资料、修改密码

    在上一篇博客中实现了用户的注销和登录,其实代码里落了点东西,就是用户登录要更新最后一次登录时间和登录IP,这次补上.今天做修改资料和修改密码,TryUpdateModel是新用到的东西. 目录: AS ...

随机推荐

  1. POJ1167 The Buses

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6234   Accepted: 1698 Description A man ...

  2. mybatis动态sql片段与分页，排序，传参的使用与一对多映射与resultMap使用

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-/ ...

  3. LeetCode OJ——Pascal's Triangle

    http://oj.leetcode.com/problems/pascals-triangle/ 杨辉三角 先分析数据,找出规律 ans[row][col] = ans[row-1][col-1]+ ...

  4. Ajax的post方式提交数据

    最新需要学习如何使用 POST 提交方法的接口,正好看到了Ajax 版本的感觉不错分享给大家,欢迎高手指点. <SCRIPT LANGUAGE=”javascript”> <!– f ...

  5. CDN或负载均衡或WAF，后端服务器获取真实IP

    问题起因: 1. 后端PHP的$_SERVER["REMOTE_ADDR"]个别服务器获取不到真实IP 2. iptables 和 悬镜 等工具,设置IP黑名单不起作用 简单点说, ...

  6. Python的格式化输出,基本运算符,编码

    一. 格式化输出现在有以下需求,让用户输入name, age, job,hobby 然后输出如下所示: -----------info of Alex Li----------- Name : Ale ...

  7. LA 3708 Graveyard

    题目链接: https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show ...

  8. 详解Java中的字符串

    字符串常量池详解 在深入学习字符串类之前, 我们先搞懂JVM是怎样处理新生字符串的. 当你知道字符串的初始化细节后, 再去写String s = "hello"或String s ...

  9. 转 Tesseract-OCR 字符识别---样本训练

    转自:http://blog.csdn.net/feihu521a/article/details/8433077 Tesseract是一个开源的OCR(Optical Character Recog ...

  10. Head First Python 学习笔记-Chapter3：文件读取和异常处理

    第三章中主要介绍了简单的文件读取和简单的异常处理操作. 首先建立文件文件夹:HeadFirstPython\chapter3,在Head First Pythong官方站点下载须要使用的文件:sket ...