由于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值。
示例:
wodsoft.validate.js下载:
欢迎提出漏洞和意见~!!
原文地址: