博客
关于我
强烈建议你试试无所不能的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

你可能感兴趣的文章
【转载】10个Web3D可视化精彩案例
查看>>
[deviceone开发]-动态添加组件add方法的示例
查看>>
极限编程创始人Ron Jeffries建议开发者放弃敏捷
查看>>
ticketea如何从一体化转向多体化架构
查看>>
解读2017之容器篇:后Kubernetes时代
查看>>
InfoQ播客:Randy Shoup谈Stitch Fix的技术栈,数据科学和微服务架构
查看>>
高德地图定位工具类
查看>>
Yelp开源数据管道项目最新组件——数据管道客户端库
查看>>
Docker周报:Windows Server将支持Mesos
查看>>
当编程语言掌握在企业手中,是生机还是危机?
查看>>
JetBrains Rider:一款全新的基于IntelliJ和ReSharper的.NET IDE
查看>>
Sonatype收购Vor Security,扩展对Nexus开源组件的支持
查看>>
Git 2.18版本已支持Git协议v2
查看>>
英孚教育全面上云与Serverless构建之路
查看>>
可执行镜像——开发环境的Docker化之路
查看>>
IntelliJ IDEA 2018.2支持Java 11、MacBook Touch Bar等新特性
查看>>
Microsoft 推出在AzureApp Service上支持Windows容器的公开预览版
查看>>
腾讯云携手朋迈推出“综合能源服务平台” 实现能源资源“智慧化”运营
查看>>
关于vue+webpack全局npm包全局引用的配置。
查看>>
LeetCode[354] Russian Doll Envelopes
查看>>