表单验证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>
wodsoft.validate.js下载：
欢迎提出漏洞和意见~！！
原文地址：http://www.cnblogs.com/Kation/archive/2013/05/12/wodsoft-validate.html
