扩展jquery.validate自定义验证，自定义提示，本地化

最新推荐文章于 2024-08-01 12:48:38 发布

smartsmile2012

最新推荐文章于 2024-08-01 12:48:38 发布

阅读量1w

点赞数 3

分类专栏： JS & Jquery

本文链接：https://blog.csdn.net/smartsmile2012/article/details/53407823

版权

本文详细介绍了如何在jQuery.validate插件中扩展自定义验证规则，并实现个性化错误提示及本地化设置，帮助开发者提升表单验证的灵活性和用户体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Css/css.css" rel="stylesheet" />
    <script src="~/Js/jquery.min.js"></script>
    <script src="~/Js/jquery.validate.min.js"></script>
    <script src="~/Js/jquery.validate.extend.js"></script>
    <script>
        $(document).ready(function () {
            $("#myform").validate({
                rules: {
                    username: { required: true, minlength: 2 },
                    password: { required: true, minlength: 6, maxlength: 16 },
                    repassword: { required: true, equalTo: "#password" },
                    amt: { required: true, isAmount: true },
                    idcard: { required: true, isIdCardNo: true }
                },
                messages: {
                    username: {
                        required: "用户名不能为空",
                        minlength: "用户名的最小长度为2"
                    },
                    password: {
                        required: "密码不能为空",
                        minlength: "密码长度不能少于6个字符",
                        maxlength: "密码长度不能超过16个字符"
                    },
                    repassword: {
                        required: "确认密码不能为空",
                        equalTo: "确认密码和密码不一致"
                    },
                    amt: {
                        required: "金额不能为空",
                        isAmount: "交易金额必须大于0，且最多有两位小数"
                    },
                    idcard: {
                        required: "身份证不能为空",
                        isIdCardNo: "身份证号码错误"
                    }
                }
            });
        });
    </script>
</head>
<body>
    <div> 
        <form id="myform" method="post" action="">
            <fieldset>
                <legend>jquery-validate表单校验验证</legend>
                <div class="item">
                    <label for="username" class="item-label">用户名:</label>
                    <input type="text" id="username" name="username" class="item-text" placeholder="设置用户名">
                </div>
                <div class="item">
                    <label for="password" class="item-label">密码:</label>
                    <input type="password" id="password" name="password" class="item-text" placeholder="设置密码">
                </div>
                <div class="item">
                    <label for="password" class="item-label">确认密码:</label>