jquery.validate 验证弹窗显示 

@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ChangePwd</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" name="viewport" />
    <link rel="stylesheet" href="~/web/css/base.css">
    <link rel="stylesheet" href="~/web/css/loyalty.css">
    <script src="~/web/js/jquery-1.11.3.min.js"></script>
    <script src="~/web/js/font.js"></script>
    <script src="~/vue/vue.js"></script>
    <script src="~/vue/axios.min.js"></script>
    <script src="~/vue/storage.js"></script>
    <script src="~/vue/jquery.validate.js"></script>
    <script src="~/layer/layer.js"></script>
</head>
<body>
    <div data-role="page">
        <div data-role="header" data-position="fixed" data-tap-toggle="false">
            <header class="head">
                <div class="header">
                    <div class="headerTop topcenter">
                        <div class="boxflex topcenter">
                            <a href="/home/main" data-rel="back" data-ajax="false" data-role="none" class="backMenuBtn"><img src="~/web/images/icon_back.png" alt="" class="backImg"></a>
                            <div class="headertit boxflex">Change Password</div>
                        </div>
                    </div>
                </div>
            </header>
        </div>
        <div data-role="main" id="app">
            <div class="loyalty_sign_box">
                <form action="" class="loyalty_sign_form loyalty_form" data-ajax="false" id="commentForm" method="post" novalidate="novalidate" validate-event="false">
                    <div class="loyalty_sign_block">
                        <div class="loyalty_sign_block_name">Original Password</div>
                        <input type="text" name="oldPwd" id="oldPwd" class="loyaltyInput" data-role="none" placeholder="original password" v-model="oldPwd">
                    </div>
                    <div class="loyalty_sign_block">
                        <div class="loyalty_sign_block_name">New Password</div>
                        <input type="text" name="newPwd" id="newPwd" class="loyaltyInput" data-role="none" placeholder="new password:5-10 characters" v-model="newPwd">
                    </div>
                    <div class="loyalty_sign_block">
                        <div class="loyalty_sign_block_name">New Password</div>
                        <input type="text" name="confirmPwd" id="confirmPwd" class="loyaltyInput" data-role="none" placeholder="retype new password" v-model="confirmPwd">
                    </div>
                    <div class="loyalty_btn_box">
                        <input type="button" value="Modify" data-role="none" class="radius_btn green_btn" id="btn" v-on:click="submitForm">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            $("#commentForm").validate({
                onclick: true,
                onfocusout: false,
                onkeyup: false,
                onkeyup: false,
                onsubmit: false,
                errorPlacement: function (error, element) {
                    layer.tips(error.html(), '#' + element[0].id, {
                        tips: 3,
                        tipsMore: true
                    });
                },
                rules: {
                    oldPwd: { required: true },
                    newPwd: { required: true },
                    confirmPwd: { equalTo: "#newPwd" }
                },
                messages: {
                    oldPwd: { required: "请输入旧密码！" },
                    newPwd: { required: "请输入新密码！" },
                    confirmPwd: { equalTo: "密码不一致！" },
                }
            });
        });
        var vm = new Vue({
            el: '#app',
            data: {
                oldPwd: "",
                newPwd: "",
                confirmPwd: "",
            },
            methods: {
                submitForm() {
                    var flag = $("#commentForm").valid();
                    if (!flag) {
                        return;
                    } else {
                        axios({
                            method: 'post',
                            url: '/Home/ChangePwdJson',
                            // 自定义请求头
                            headers: { 'Content-Type': 'application/json;charset=utf-8', 'token': storage.get("token") },
                            // timeout: 1000, // 默认值是 `0` (永不超时)
                            data: {
                                old_pwd: this.oldPwd,
                                new_pwd: this.newPwd,
                                confirm_pwd: this.confirmPwd
                            }
                        }).then(res => {
                            if (res.data.Code == 100) {
                                location.href = "/home/main";
                            } else {
                                if (res.data.Code == 104) { location.href = "/home/login"; }
                                else {
                                    alert(res.data.Msg);
                                }
                            }
                        }).catch(function (error) { // 请求失败处理
                            console.log('error' + error);
                        });
                    }
                }
            }
        });

    </script>
</body>
</html>

 

posted @ 2022-10-18 10:00  今晚再打老虎  阅读(255)  评论(0)    收藏  举报