jQuery表单验证插件解析(推荐)


Posted in Javascript onJuly 21, 2016

一:插件

(1) Validform_v5.3.1_min.js

Validform_Datatype.js

(2)网址:http://validform.rjboy.cn

在这个网站上有demo和插件下载链接。

二:普通验证

(1)Validform_Datatype.js

/*
Validform datatype extension
By sean during December 8, 2012 - February 20, 2013
For more information, please visit http://validform.rjboy.cn
扩展以下类型:
date:匹配日期
zh:匹配中文字符
dword:匹配双字节字符
money:匹配货币类型
ipv4:匹配ipv4地址
ipv6:匹配ipv6地址
num:匹配数值型
qq:匹配qq号码
unequal:当前值不能等于被检测的值,如可以用来检测新密码不能与旧密码一样
notvalued:当前值不能包含指定值,如密码不能包含用户名等的检测
min:多选框最少选择多少项
max:多选框最多不能超过多少项
byterange:判断字符长度,中文算两个字符
numrange:判断数值范围,如小于100大于10之间的数
daterange:判断日期范围
idcard:对身份证号码进行严格验证
*/

(2)Validform v5.3.1 

var tipmsg = {
tit : "提示信息",
w : {
"*" : "不能为空!",
"*6-16" : "请填写6到16位任意字符!",
"n" : "请填写数字!",
"n6-16" : "请填写6到16位数字!",
"s" : "不能输入特殊字符!",
"s6-18" : "请填写6到18位字符!",
"p" : "请填写邮政编码!",
"m" : "请填写手机号码!",
"e" : "邮箱地址格式不对!",
"url" : "请填写网址!",
"w1" : "必须输入字母开头、可带数字、下划线的字符"
},
def : "请填写正确信息!",
undef : "datatype未定义!",
reck : "两次输入的内容不一致!",
r : "通过信息验证!",
c : "正在检测信息…",
s : "请{填写|选择}{0|信息}!",
v : "所填信息没有经过验证,请稍后…",
p : "正在提交数据…"
}

(3)使用

<input name="startTime" class="Wdate" onClick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" style="width: 150px"
value="" datatype="date" nullmsg="开始时间不能为空" errormsg="日期格式不正确!" >

在input中加入属性datatype。nullmsg是为空时的提示语,errormsg是不满足datatype属性格式时的提示语。

三:特殊验证

(1)特殊验证指js中提供的方法不能满足实际需求时,需要自己写相应的datatype来满足需求。

比如,结束时间不小于开始时间:

$(".registerform").Validform({
datatype:{
"enddate":function(gets,obj,curform,regxp){
/*参数gets是获取到的表单元素值,
obj为当前表单元素,
curform为当前验证的表单,
regxp为内置的一些正则表达式的引用。*/
var reg1=regxp["date"],
startdate=curform.find("[name=startTime]").val(),
enddate=gets;
if(reg1.test(enddate)&&startdate<enddate){return true;}
return false;
} 
},
ajaxPost:true
});

以上所述是小编给大家介绍的jQuery表单验证插件解析(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript从右边截取指定字符串的三种实现方法
Nov 29 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
JavaScript操作文件_动力节点Java学院整理
Jun 30 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
JavaScript 数组- Array的方法总结(推荐)
Jul 21 #Javascript
完美JQuery图片切换效果的简单实现
Jul 21 #Javascript
jQuery的ajax下载blob文件
Jul 21 #Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 #Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 #Javascript
jQuery新窗口打开外链接
Jul 21 #Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 #Javascript
You might like
APMServ使用说明
2006/10/23 PHP
使用eAccelerator加密PHP程序
2008/10/03 PHP
PHP高级OOP技术演示
2009/08/27 PHP
提高define性能的php扩展hidef的安装和使用
2011/06/14 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
使用angularjs创建简单表格
2016/01/21 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python优先队列实现方法示例
2017/09/21 Python
Python快速排序算法实例分析
2017/11/29 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
使用Pycharm分段执行代码
2020/04/15 Python
Python matplotlib实时画图案例
2020/04/23 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
Python读取yaml文件的详细教程
2020/07/21 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
100%羊绒:NakedCashmere
2020/08/26 全球购物
领导证婚人证婚词
2014/01/13 职场文书
精彩的英文自荐信
2014/01/30 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
硕士生工作推荐信
2014/03/07 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
装饰施工员岗位职责
2015/04/11 职场文书
大学生团日活动总结
2015/05/06 职场文书
毕业典礼主持词
2015/06/29 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
Python中 range | np.arange | np.linspace三者的区别
2022/03/22 Python