jQuery插件——Validation Plugin

最新推荐文章于 2024-09-14 16:44:21 发布

weixin_30856725

最新推荐文章于 2024-09-14 16:44:21 发布

阅读量84

点赞数

文章标签： javascript php ViewUI

原文链接：http://www.cnblogs.com/zhyzyn1314/p/5480985.html

版权

jQuery插件——Validation Plugin 顾名思义，用于验证表单验证。某位大神编写，下载地址https;//plugins.jquery.com/tag/validate/

一、基本验证方法：

required	必填
remote	远程校验
minlength	最小长度
maxlength	最大长度
rangelength	长度范围
min	最小值
max	最大值
range	值范围
email	Email格式
url	URL格式
date	日期
dateISO	ISO日期
number	数字
digits	整数
equalTo	与另一个元素值相等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录DEMO</title>
    <link href="css/style.css" rel="stylesheet">
    <script src="js/jquery-1.10.0.js" type="text/javascript"></script>
    <script src="js/jquery.validate-1.13.1.js" type="text/javascript"></script>
</head>
<body>
<form action="" id="loginForm" method="post">
    <fieldset>
        <legend>用户登录</legend>
        <p id="info"></p>

        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" name="username"/>
        </p>

        <p>
            <label for="password">密码</label>
            <input type="password" id="password" name="password"/>
        </p>
        <!--<p>-->
        <!--<label for="confirm-password">确认密码</label>-->
        <!--<input type="password" id="confirm-password" name="confirm-password"/>-->
        <!--</p>-->
        <p>
            <input type="submit" value="登录"/>
        </p>
    </fieldset>
</form>
<script type="text/javascript">
    $(function () {
        $("#loginForm").validate({
            rules: {
                username: {
                    required: true,
                    minlength: 2,
                    maxlength: 10,
//                    remote:"php/login.php"
                    remote: {
                        url: "php/login.php",
                        type: "post",
                        data: {
                            loginTime: function () {
                                return +new Date;
                            }
                        }
                    }
                },
                password: {
                    required: true,
                    minlength: 2,
                    maxlength: 10
                }
            },
            messages: {
                username: {
                    required: "请填写用户名",
                    minlength: "请填写2位以上用户名",
                    maxlength: "请填写10位以下用户名",
                    remote: "用户名不符"
                },
                password: {
                    required: "请填写密码名",
                    minlength: "请填写2位以上密码",
                    maxlength: "请填写10位以下密码"
                }
            }
        })
    })
</script>
</body>
</html>

1. min, minlength ...等区别

　　min是最小值，是数字。

　　minlength是长度，可以为字符。

2. data与dateISO

　　dateISO格式更严格，必须为2016/5/11或者2016-5-11

3. equalTo 一般用户重复输入密码

二、进阶验证方法：

1. valid()方法：检查表单是否有效。

2. rules(), rules("add", {min:10}), rules("remove", {max min required}) :获取规则，添加“min”规则，删除“max min required”规则。只能用于单个元素。

3. Validator对象，validate方法返回Validator对象

　　1）Validator.form()验证表单是否有效，返回true、false

　　2）Validator.element(element)验证某个元素是否有效，返回true、false

　 3）Validator.resetForm()把表单恢复到验证前的状态

　　4）Validator.showErrors(errors)针对某个元素显示特定的错误信息（一般用于显示自定义的错误信息）

　　5）Validator.numberOfInvalids()返回无效的元素数量

3. 国际化

$.extend($.validator.messages, {
    required: "这是必填字段",
    remote: "请修正此字段",
    email: "请填写有效的电子邮件地址",
    url:"请输入有效的网址",
    date:"请输入有效的日期",
    dateISO:"请输入有效的日期（YYYY-MM-DD）",
    number : "请输入有效的数字",
    digits : "只能输入数字",
    creditcard: "请输入有效的信用卡号码",
    equalTo:"您的输入不相同",
    extension:"请输入有效的后缀",
    maxlength: $.validator.format("最多可以输入{0}个字符"),
    minlength: $.validator.format("最少要输入{0}个字符"),
    rangelength: $.validator.format("请输入长度在{0}到{1}之间的字符串"),
    range: $.validator.format("请输入范围在{0}到{1}之间的数值"),
    max: $.validator.format("请输入不大于{0}的数值"),
    min: $.validator.format("请输入不小于{0}的数值")
});