Razor中Jquery.validate.js验证

zoukankan html css js c++ java

Razor中Jquery.validate.js验证

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Jquery.validate.js示例</title>

    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/Site.css", "~/Content/themes/base/jquery-ui.css")
    @Styles.Render("~/Scripts/jqGrid/css/ui.jqgrid.css")
    @Scripts.Render("~/Scripts/json2.js", "~/Scripts/jquery-1.9.1.js", "~/Scripts/jquery.form.js")
    @Scripts.Render("~/Scripts/jquery-ui-1.10.1.js")
    @Scripts.Render("~/Scripts/jquery.validate.js")
    @Scripts.Render("~/Scripts/jquery.cookie.js")
    @Scripts.Render("~/Scripts/Gaia.Web.Common.js")
    @Scripts.Render("~/Scripts/jqGrid/js/jquery.jqGrid.min.js")
    @Scripts.Render("~/Scripts/jqGrid/js/i18n/grid.locale-cn.js")

    <script type="text/javascript" src="~/Scripts/jQuery.md5.js"></script>

    <style type="text/css">
        form {
            font-size:10pt;
            text-align:left;
        }
        table {
            margin:10px;
        }
        label.error {
            color: red;
            font-style: italic;
            cursor:pointer;
            margin-left:12px;
            font-size:12px;
        }
        input.error { border:1px solid #F00; }
        input[type="text"]:focus { border:1px solid #0ff; }

        ul,li { list-style:none}
        .box {80%; height:600px; border:0px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}
        .tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}
        .tagMenu h2 {font-size:12px; padding-left:10px;}
        .tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}
        ul.menu li {float:left; margin-bottom:1px; line-height:16px; height:14px; margin:5px 0 0 -1px; border-left:1px solid #999; text-align:center; padding:0 12px; cursor:pointer}
        ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0}
        .content { padding:10px}
    </style>

    <script type="text/javascript">
        var oldPassword = null;

        $(function () {
            initMenu();
            validateExt();
            getUserInfo();
            validate();
        });

        //初始化导航栏
        function initMenu() {
            $("ul.menu li:first-child").addClass("current");
            $("div.content").find("div.layout:not(:first-child)").hide();
            $("div.content div.layout").attr("id", function () { return "No" + $("div.content div.layout").index(this) });

            $("ul.menu li").mouseenter(function () {
                var current = $("ul.menu li");
                var index = current.index(this);
                var prefix = "No";
                show(current, index, prefix);
            });

            function show(controlMenu, num, prefix) {
                var content = prefix + num;
                $('#' + content).siblings().hide();
                $('#' + content).show();
                controlMenu.eq(num).addClass("current").siblings().removeClass("current");
            };
        }

        //UI校验
        function validate() {
            $("#nameForm").validate({
                rules: {
                    niceName: {
                        required: true
                    }
                },

                messages: {
                    niceName: "昵称不能为空",
                }
            });

            $("#nameSubmit").click(
                function () {
                    if ($("#nameForm").valid()) {
                        updateNiceName();
                    }
                });

            $("#pwdForm").validate({
                rules: {
                    oldPwd: {
                        required: true,
                        minlength: 6,
                        isWrong: true
                    },
                    newPwd: {
                        required: true,
                        minlength: 6,
                        notEqual: "#oldPwd"
                    },
                    confirmPwd: {
                        required: true,
                        minlength: 6,
                        equalTo: "#newPwd",
                        notEqual: "#oldPwd"
                    }
                },

                messages: {
                    oldPwd: {
                        required: "密码至少为6位",
                        minlength: "密码至少为6位"
                    },
                    newPwd: {
                        required: "密码至少为6位",
                        minlength: "密码至少为6位"
                    },
                    confirmPwd: {
                        required: "密码至少为6位",
                        minlength: "密码至少为6位",
                        equalTo: "确认密码不相同"
                    }
                }
            });

            $("#pwdSubmit").click(
                function () {
                    if ($("#pwdForm").valid()) {
                        updatePassword();
                    }
                });
        }

        //自定义校验
        function validateExt() {
            jQuery.validator.addMethod("isWrong",
                function (value, element) {
                    var md5Pwd = $.md5(value);
                    return md5Pwd == oldPassword ? true : false;
                },
                "旧密码不正确");

            jQuery.validator.addMethod("notEqual",
                function (value, element, params) {
                    var oldPwd = $(params).val();
                    return oldPwd == value ? false : true;
                },
                "新旧密码不能相同");
        }

        //查询用户信息
        function getUserInfo() {
            var userInfo = {
                "APIKEY": unescape($.cookie("user_authkey")),
                "Data": {
                    "user_authkey": unescape($.cookie("user_authkey"))
                }
            };

            var jsonUserInfo = JSON.stringify(userInfo);

            $.ajax({
                url: 'users.get',
                cache: false,
                type: 'POST',
                asyn: false,
                contentType: 'application/json; charset=utf-8',
                data: jsonUserInfo,
                success: function (content) {
                    var userInfo = content.Data[0];

                    oldPassword = userInfo.user_pass;
                    $('#niceName').val(userInfo.user_nicename);
                }
            });
        }

        //更新用户昵称
        function updateNiceName() {
            var regInfo = {
                "APIKEY": unescape($.cookie("user_authkey")),
                "Data": {
                    "user_authkey": unescape($.cookie("user_authkey")),
                    "user_nicename": $('#niceName').val(),
                }
            };

            var jsonRegInfo = JSON.stringify(regInfo);

            $.ajax({
                url: 'users.update',
                cache: false,
                type: 'POST',
                asyn: false,
                contentType: 'application/json; charset=utf-8',
                data: jsonRegInfo,
                success: function (flag) {
                    if (flag == true) {
                        alert("昵称修改成功");
                    }
                    else {
                    }
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        }

        //更新用户密码
        function updatePassword() {
            var regInfo = {
                "APIKEY": unescape($.cookie("user_authkey")),
                "Data": {
                    "user_authkey": unescape($.cookie("user_authkey")),
                    "user_pass": $('#newPwd').val()
                }
            };

            var jsonRegInfo = JSON.stringify(regInfo);

            $.ajax({
                url: 'users.update',
                cache: false,
                type: 'POST',
                asyn: false,
                contentType: 'application/json; charset=utf-8',
                data: jsonRegInfo,
                success: function (flag) {
                    if (flag == true) {
                        alert("密码修改成功");
                    }
                    else {
                    }
                },
                error: function (msg) {
                    alert(msg);
                }
            });
        }
    </script>
</head>
<body>
    <div class="box" style="float:left">
        <div class="tagMenu">
            <h2 style="text-align:left">用户信息修改</h2>
            <ul class="menu">
                <li id="TabChangeName">昵称修改</li>
                <li id="TabChangePwd">密码修改</li>
            </ul>
        </div>
        <div class="content">
            <div id="ItemChangeName" class="layout" style="text-align:left" >
                <form method="post" id="nameForm" name="nameForm">
                    <table>
                        <tr>
                            <td><label>用户昵称：</label></td>
                            <td><input name="niceName" id="niceName" value="" type="text" size="25" /></td>
                        </tr>
                    </table>

                    <input type="button" name="nameSubmit" id="nameSubmit" style="float:left;" value="修改" />
                    <input type="reset" name="nameReset" id="nameReset" style="float:left;" value="重置" />
                </form>
            </div>
            <div id="ItemChangePwd" class="layout" style="text-align:left" >
                <form method="post" id="pwdForm" name="pwdForm">
                    <table>
                        <tr>
                            <td><label>原密码：</label></td>
                            <td><input name="oldPwd" id="oldPwd" value="" type="password" size="26" /></td>
                        </tr>
                        <tr>
                            <td><label>新密码：</label></td>
                            <td><input name="newPwd" id="newPwd" value="" type="password" size="26" /></td>
                        </tr>
                        <tr>
                            <td><label>确认密码：</label></td>
                            <td><input name="confirmPwd" id="confirmPwd" value="" type="password" size="26" /></td>
                        </tr>
                    </table>

                    <input type="button" name="pwdSubmit" id="pwdSubmit" style="float:left;" value="修改" />
                    <input type="reset" name="pwdReset" id="pwdReset" style="float:left;" value="重置" />
                </form>
            </div>
        </div>
    </div>
</body>
</html>

查看全文

相关阅读:
团队第二次冲刺10（6.03）
购买图书问题
 找水王02
学习进度13
团队第二次冲刺09（6.02）
团队第二次冲刺08（6.01）
C++通过Swig跨线程回调Python代码
 Windows 10系统永久关闭Windows Defender Antivirus防病毒程序方法
 Windows系统Python直接调用C++ DLL
Windows10系统Python2.7通过Swig调用C++过程

原文地址：https://www.cnblogs.com/zhangpengshou/p/2968554.html