Razor中Jquery.validate.js验证

最新推荐文章于 2020-07-24 17:39:42 发布

aiman5818

最新推荐文章于 2020-07-24 17:39:42 发布

阅读量131

点赞数

文章标签： json javascript ui ViewUI

原文链接：http://www.cnblogs.com/zhangpengshou/archive/2013/03/19/2968554.html

版权

<!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 {width: 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>

转载于:https://www.cnblogs.com/zhangpengshou/archive/2013/03/19/2968554.html