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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
解决angular的$http.post()提交数据时后台接收不到参数值问题的方法
Dec 10 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
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
PHP的一个基础知识 表单提交
2011/07/04 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
Vue使用vue-cli创建项目
2017/09/01 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
2020/08/13 Javascript
Python 模拟购物车的实例讲解
2017/09/11 Python
快速了解Python中的装饰器
2018/01/11 Python
django中media媒体路径设置的步骤
2019/11/15 Python
python生成特定分布数的实例
2019/12/05 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
python 动态绘制爱心的示例
2020/09/27 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
2013/01/06 HTML / CSS
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
求职推荐信范文
2013/12/01 职场文书
幼儿园教师备课制度
2014/01/12 职场文书
员工入职担保书范文
2014/04/01 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2015年药店工作总结
2015/04/20 职场文书
起诉书范文
2015/05/20 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
工资证明格式模板
2015/06/12 职场文书
mysql主从复制的实现步骤
2021/10/24 MySQL
Java 写一个简单的图书管理系统
2022/04/26 Java/Android
分享几个实用的CSS代码块
2022/06/10 HTML / CSS