表单验证wodsoft.validate.js

由于jquery.validate.js不满足我的需求，所以自己写了一个。

以jQuery为基础。

Version 0.2.0

支持的类型：

Input name="text"
Input name="password"
Input name="email"
Input name="url"
Input name="number"
Textarea

支持的验证类型：

required（必填项）
email（电子邮箱格式）
date（日期格式）
number（数字格式）
integer（整数格式）
equalTo（相同于某元素）
maxlength（字符最大长度）
minlength（字符最小长度）
max（数值最大值）
min（数值最小值）
regex（正则表达式）
remote（远程验证）

使用验证参数：

data-text="[textElement]"（显示错误的元素，例如#nameText）
data-load="[loadElement]"（验证时，显示的载入中元素，例如#nameLoading）
data-name="[name]"，用于替换{name}标签，没有时使用name属性值。
data-[type]="[data]"（需要验证的类型，例如data-required="true"）
data-[type]-text="[text]" （验证失败显示的信息，例如data-required-text="{name} is required."）
data-novalidate="true"（此元素不进行验证）

验证类型值说明：

required, email, date, number, integer："true"
maxlength, minlength, max, min, regex: "[value]"
remote:
- data-remote="[url]"，其中，该字符串支持标签替换
- data-remote-result="[result]"，远程验证返回结果，相同才能通过

标签替换：

{name}，默认查找data-name的值，如果没有，取name的值
{data}，该data-[type]的值
{value}，该input的值
{rnd}，Math.random()随机数

使用方法：

$("#form").validate();
//Or
$("#name").validate();

当用具体表单元素执行validate时，只会为该元素进行验证。

当用form执行validate时，会自动为该表单所有支持的表单元素进行验证，有data-novalidate="true"属性的除外。

并且，在form提交时自动判断是否验证通过，验证通过默认为所有textElement，loadElement的display为none。

自定义选项：

使用某元素单独执行validate方法的参数：

{
    success: function () { },
    failed: function () { },
    message: {
            required: "{name} is required.",
            email: "{name} is not a valid email address.",
            date: "{name} is not a valid date.",
            number: "{name} is not a valid number.",
            integer: "{name} is not a integer.",
            equalTo: "{name} is not the same.",
            maxlength: "{name} can not more than {data} chars",
            minlength: "{name} can not less than {data} chars",
            max: "{name} can not more than {data}",
            min: "{name} can not less than {data}",
            regex: "{name} format error.",
            remote: "{name} validate failed." },
    setText: function (element, text) { }
}

success为成功时执行的方法

failed为失败时执行的方法

message可以设置默认消息

setText可以设置设置消息的方法

使用form执行validate方法的参数：

{
    message: {
            required: "{name} is required.",
            email: "{name} is not a valid email address.",
            date: "{name} is not a valid date.",
            number: "{name} is not a valid number.",
            integer: "{name} is not a integer.",
            equalTo: "{name} is not the same.",
            maxlength: "{name} can not more than {data} chars",
            minlength: "{name} can not less than {data} chars",
            max: "{name} can not more than {data}",
            min: "{name} can not less than {data}",
            regex: "{name} format error.",
            remote: "{name} validate failed." },
    validator : function (element) { return true; }
}

message为通用消息。

validator当表单提交时，进行自动验证使用的方法，方法传入的参数为data-text值。

示例：

View Code

<div class="page secondary">
    <div class="page-header">
        <div class="page-header-content">
            <h1>Register</h1>
            <a href="/" class="back-button big page-back"></a>
        </div>
    </div>
    <div class="page-region">
        <div class="page-region-content">
            <form id="form" method="post">
                <div class="grid">
                    <div class="row">
                        <div class="span2">
                            <attr title="Email is used to as login account."><h2>Email</h2></attr>
                        </div>
                        <div class="span4">
                            <div class="input-control text">
                                <input id="email" name="Email" type="text" data-required="true" data-remote="/Account/ContainsEmail?email={value}" data-remote-text="Email is already exist." data-remote-result="0" />
                                <button class="btn-clear"></button>
                            </div>
                        </div>
                        <div class="span4">
                            <img id="emailLoading" src="/images/preloader-w8-cycle-black.gif" style="height: 28px; width: 28px; display: none;">
                            <span id="emailText" class="label warning">Email is required.</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span2">
                            <attr title="Username is used to show as your name in pages."><h2>Username</h2></attr>
                        </div>
                        <div class="span4">
                            <div class="input-control text">
                                <input id="username" name="Username" type="text" data-required="true" data-minlength="2" data-remote="/Account/ContainsUsername?username={value}" data-remote-text="Username is already exist." data-remote-result="0"/>
                                <button class="btn-clear"></button>
                            </div>
                        </div>
                        <div class="span4">
                            <img id="usernameLoading" src="/images/preloader-w8-cycle-black.gif" style="height: 28px; width: 28px; display: none;">
                            <span id="usernameText" class="label warning">Username is required.</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span2">
                            <attr title="Must more than 6 chars."><h2>Password</h2></attr>
                        </div>
                        <div class="span4">
                            <div class="input-control password">
                                <input id="password" name="Password" type="password" data-required="true" data-minlength="6" />
                                <button class="btn-reveal"></button>
                            </div>
                        </div>
                        <div class="span4">
                            <span id="passwordText" class="label warning">Password is required.</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span2">
                            <attr title="The same as your password."><h2>RePassword</h2></attr>
                        </div>
                        <div class="span4">
                            <div class="input-control password">
                                <input id="repassword" type="password" data-equalTo="#password" data-equalTo-text="Not the same as Password." />
                                <button class="btn-reveal"></button>
                            </div>
                        </div>
                        <div class="span4">
                            <span id="repasswordText" class="label warning">Not the same as Password.</span>
                        </div>
                    </div>
                    <div class="row" id="verifyCodeDiv">
                        <div class="span2">
                            <attr title="Please input the image's content."><h2>Verify Code</h2></attr>
                        </div>
                        <div class="span2">
                            <div class="input-control text">
                                <input id="verifyCode" name="VerifyCode" type="text" data-required="true" data-remote="/Account/RegisterVerifyCodeCheck?code={value}" data-remote-result="1" />
                                <button class="btn-clear"></button>
                            </div>
                        </div>
                        <div class="span2">
                            <attr title="Click me to change image."><img style="cursor: pointer" id="verifyCodeImg" src="/Account/RegisterVerifyCode" /></attr>
                        </div>
                        <div class="span4">
                            <img id="verifyCodeLoading" src="/images/preloader-w8-cycle-black.gif" style="height: 28px; width: 28px; display: none;">
                            <span id="verifyCodeText" class="label warning">This account need a verify code now.</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span12">
                            <input type="submit" value="Register" />
                            <input type="reset" value="Reset" />
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $("#form").validate();
    $("#verifyCodeImg").click(function () {
        $("#verifyCode").val("");
        $("#verifyCodeText").html("Verify Code is required.");
        $("#verifyCodeText").hide();
        $(this).attr("src", "/account/RegisterVerifyCode?rnd=" + Math.random());
        });
</script>