jquery-validate验证通过和失败自定义信息

最新推荐文章于 2020-06-21 15:24:10 发布

.NET跨平台

最新推荐文章于 2020-06-21 15:24:10 发布

阅读量291

点赞数

原文链接：https://blog.csdn.net/WuLex

版权

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="valid.aspx.cs" Inherits="OneTask.valid" %>

<!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>

    <script src="js/jquery1.12.4.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/additional-methods.js"></script>

    <style>
        #thetable {
            font-size: 12px;
        }

            #thetable td {
                width: 40px;
                height: 30px;
                line-height: 30px;
                text-align: center;
            }

            #thetable tr > td:nth-of-type(3) {
                width: 120px;
                text-align: left;
            }

        span.error {
            color: red;
        }


        .error {
            float: left;
            border: #f0a6a6 1px solid;
            background-color: #f9e2e2;
            color: #d71111;
        }
    </style>
</head>
<body>
    <div id="ant">
        <ul>
        </ul>
    </div>
    <form id="myform">
        <table id="thetable">
            <tr>
                <td>姓名:</td>
                <td>
                    <input type="text" name="username" />
                </td>
                <td></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td>
                    <input type="password" name="pw" />
                </td>
                <td></td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td>
                    <input type="text" name="email" />
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="submit" value="提交" />
                    <input type="reset" value="重置" />
                </td>
            </tr>
        </table>
        <div id="summary"></div>
    </form>
    <script>
        $(document).ready(function () {

            var errorimg = "<img alt=\"\" src=\"no.png\">";

            $("#myform").validate({
                //errorClass: "error",
                //errorElement: "span",
                //wrapper: "li",
                //errorLabelContainer: $("#ant ul"),
                //errorContainer: $("#ant"),

                validClass: "success",
                errorClass: "error",
                errorElement: "p",
                //wrapper: "p",
                showErrors: function (errorMap, errorList) {
                    $("#summary").html("您的表单包含" + this.numberOfInvalids() + " 个错误.");
                    //for (var prop in errorMap) {
                    //    $("[name=" + "'" + prop + "'" + "]").next("p").html(errorMap[prop]);
                    //}
                    this.defaultShowErrors();
                },
                rules: {
                    username: "required",
                    pw: "required",
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    username: errorimg + "用户名是必填项目",
                    pw: errorimg + "密码是必填项目",
                    email: {
                        required: errorimg + "邮箱是必填项目",
                        email: errorimg + "邮箱格式不正确"
                    }
                },
                /*关闭键盘输入时的实时校验*/
                onkeyup: null,
                /*添加校验成功后的执行函数--修改提示内容，并为正确提示信息添加新的样式(默认是valid)*/
                success: function (label, element) {
                    /*label的默认正确样式为valid，需要通过validClass来重置，否则这里添加的其他样式不能被清除*/

                    label.html('<img alt="" src="/yes.png">').addClass("success");
                }
            });
        });
    </script>

</body>
</html>

如图:

在这里插入图片描述

.NET跨平台

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery-validate验证通过和失败自定义信息

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="valid.aspx.cs" Inherits="OneTask.valid" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="ser...
复制链接

扫一扫