博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
表单验证wodsoft.validate.js
阅读量:6214 次
发布时间:2019-06-21

本文共 3559 字,大约阅读时间需要 11 分钟。

由于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

Email

Email is required.

Username

Username is required.

Password

Password is required.

RePassword

Not the same as Password.

Verify Code

This account need a verify code now.

wodsoft.validate.js下载:

欢迎提出漏洞和意见~!!

 原文地址:

转载于:https://www.cnblogs.com/Kation/archive/2013/05/12/wodsoft-validate.html

你可能感兴趣的文章
Ubuntu 无法mount解决办法
查看>>
详解 Discuz 的 PHP经典加密解密函数 authcode
查看>>
使用curl命令查看访问url的时间
查看>>
WinForm中跨线程操作控件
查看>>
下MFC中对象、句柄、ID之间的区别.
查看>>
Flymeos插桩适配教程
查看>>
还在用PS磨皮去皱?看看如何用神经网络高度还原你的年轻容貌!
查看>>
大端模式与小端模式、网络字节顺序与主机字节顺序
查看>>
微信支付申请90%的商户都卡在这儿了,申请微信支付,商户功能设置详细说明...
查看>>
高仿Instagram 页面效果android特效
查看>>
2016 年总结
查看>>
将String转化成Stream,将Stream转换成String
查看>>
java路径Java开发中获得非Web项目的当前项目路径
查看>>
【工具使用系列】关于 MATLAB 遗传算法与直接搜索工具箱,你需要知道的事
查看>>
Kali-linux Arpspoof工具
查看>>
PDF文档页面如何重新排版?
查看>>
基于http协议使用protobuf进行前后端交互
查看>>
bash腳本編程之三 条件判断及算数运算
查看>>
php cookie
查看>>
linux下redis安装
查看>>