jQuery表单验证插件用法实例

  • 时间:
  • 2312人关注

这篇文章主要介绍了jQuery表单验证插件解析(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下,另外这篇文章主要知识点是关于表单验证插件、jQuery表单验证的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子资料:

一:插件

(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'})" 
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表单验证插件解析(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

码农之家
jQuery Form 页面表单提交的方法

15小时29分钟前回答

jQuery Form 页面表单提交的方法

 

 

<script type="text/javascript" src="${ctx}/js/jquery.form.js"></script> 
<script type="text/javascript"> 
    //创建测试实例 
    function createInstance() { 
        var options = { 
            success : function(json) { 
                if (json.succ) { 
                    alert(json.info); 
                    window.parent.ymPrompt.doHandler("close", true); 
                } 
            } 
        }; 
        $("#f1").ajaxSubmit(options); 
    } 

    //关闭按钮 
    function closeWindow() { 
        window.parent.ymPrompt.doHandler("close", true); 
    } 
</script> 

 

Form表单:

 

 

<form id="f1" name="f1" action="${ctx}/process/createInstance.do" 
            method="post"> 
            <table > 
                <tr> 
                    <td nowrap="nowrap" >测试名称:</td> 
                    <td><input type="text" name="name" value="${instance.name}" 
                        /><em class="em_user_manage">*</em> 
                    </td> 
                </tr> 
                <tr> 
                    <td nowrap="nowrap" >测试场景:</td> 
                    <td><input type="text" name="scene"  
                        value="${instance.scene}" /><em class="em_user_manage">*</em> 
                    </td> 
                </tr> 
                <tr> 
                    <td nowrap="nowrap" >测试目标:</td> 
                    <td><textarea type="text" name="goal" id="goal" cols="32" 
                            rows="7">${instance.goal}</textarea> 
                    </td> 
                </tr> 
                <tr> 
                    <td nowrap="nowrap" >测试说明:</td> 
                    <td><textarea type="text" name="description" id="description" 
                            cols="32" rows="7">${instance.description}</textarea> 
                    </td> 
                </tr> 
                <tr> 
                    <td colspan="2" align="center"><input type="hidden" 
                        name="extProcessDefinitionId" 
                        value="${instance.extProcessDefinitionId}" /><input type="hidden" 
                        name="signIn" value="${instance.signIn}" /><input type="hidden" 
                        name="definitionId" value="${instance.definitionId}" /><input 
                        type="button" value="确定" onclick="createInstance();" /><input 
                        type="button" value="取消" onclick="closeWindow();" /></td> 
                </tr> 
            </table> 
        </form> 

 

展开阅读

上一篇:jQuery同步提交的实现代码分享

下一篇:使用jQuery实现放大镜效果

相关内容

  • jQuery表单元素选择器知识点分享

    这篇文章主要为大家详细介绍了jQuery选择器之表单元素选择器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    02-05jQuery选择器之表单元素选择器详解

    阅读更多
  • jquery实现ajax提交表单信息的方法汇总

    下面小编就为大家带来一篇jquery实现ajax提交表单信息的简单方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    03-13jquery实现ajax提交表单信息的简单方法(推荐)

    阅读更多
  • 解析jquery中使用$(#form).submit()重写提交表单无效原因

    jqeury的validationEngine做ajax校验,当表单中的最后一个字段需要做ajax验证,在字段输入完毕后点击回车提交表单时不起作用,接下来为大家介绍下解决方法感兴趣的各位可以参考下哈

    01-26jquery中使用$(#form).submit()重写提交表单无效原因分析及解决

    阅读更多
  • jQuery根据类型自动显示和隐藏表单效果示例

    这篇文章主要给大家分享了jQuery实现根据类型自动显示和隐藏表单的代码,非常的简单实用,仅仅10行代码,推荐给大家,希望能给大家一些提示。

    01-14jQuery实现根据类型自动显示和隐藏表单

    阅读更多
  • jquery的ajax提交form表单的方法总结

    下面小编就为大家带来一篇jquery的ajax提交form表单的两种方法小结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考

    05-27jquery的ajax提交form表单的两种方法

    阅读更多
  • jQuery使用ajaxSubmit()提交表单方法步骤

    这篇文章主要介绍了jQuery使用ajaxSubmit()提交表单示例,使用延第三方插件jquery.form实现,需要的朋友可以参考下

    01-23jQuery使用ajaxSubmit()提交表单示例

    阅读更多
  • 详解jQuery中设置form表单中action值的方法

    下面小编就为大家带来一篇jQuery中设置form表单中action值的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    02-28jQuery中设置form表单中action值的实现方法

    阅读更多
  • jQuery实战

    jQuery实战

    jQuery实战(第三版) 适用于想深入学习jQuery的Web开发人员,jQuery是互联网上流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了整个jQuery框架,此外

    大小:99.0 MBjQuery

    点击下载
  • PHP与jQuery开发实例

    PHP与jQuery开发实例

    这书由浅入深地叙述了怎么使用PHP与jQuery搭建高宽比互动的Web运用。每一章聚焦点一个主题风格,探讨Web开发者常常必须处理的一类实际难题。书中以实际上范例及编码表述的方法得出了有目

    大小:9.8 MBPHP开发

    点击下载
  • jQuery EasyUI开发指南

    jQuery EasyUI开发指南

    使用Java开发软件的开发人员一定会接触到前端开发,而前端开发有一个流行趋势,那就是插件开发。jQuery EasyUI是目前Java Web领域流行的插件开发工具。《jQuery EasyUI开发指南》主要讲述EasyUI各种

    大小:48.4 MBjQuery

    点击下载
  • jQuery Mobile从入门到精通

    jQuery Mobile从入门到精通

    《jQuery Mobile从入门到精通》 一书以实例驱动的方式,用近百个实战案例讲述了jQuery Mobile及APP移动开发的相关知识,并通过5个项目案例展现开发流程。全书分为4部分,共19章:第1部分为移动开

    大小:168.7 MBjQuery

    点击下载
  • 《从0到1:jQuery快速上手》课件,源码,习题答案

    《从0到1:jQuery快速上手》课件,源码,习题答案

    编辑推荐 众多前端工程师、高校老师、学生一致推荐,源自阅读量破600万的人气教程。 适合零基础初学者,1小时快速上手,3天轻松入门; 通俗易懂,风趣幽默,jQuery还可以这么好玩; 每一章都有大量练习,让你更快达到实战水平; 配套网站 配套练习 课件PPT 源码素材 作者答疑。 内容简介 作者根据自己多年的前后端开发经验,站在完全零基础读者的角度,基于jQuery 1.12.x版本,详尽介绍了jQuery的基础知识及开发技巧。 《从0到1 jQuery快速上手》分为

    大小:2.8 MBjQuery

    点击下载

学习笔记

46小时33分钟前回答

jquery.validate表单验证插件使用方法解析

为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易。jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下 使用方式 1、在控件中 使用默认验证规则 ,例子: 电子邮件(必填) input id="email" class="required email" value="email@" / 2、可以在控件中 自定义验证规则 ,例子: 自定义(必填,[3,5]) input id="complex" value="hi" class="{required:true,minlength:3, maxlength:5,messages:{required:'为什么不输入一点文字呢',minlength:'输入的太少了',maxlength:'输入那么多干嘛'}}" / 3、通过 javascript自定义验证规则 ,下面的JS自定义了两个规则,password和confirm_password $().ready(func……

14小时9分钟前回答

Yii框架中jquery表单验证插件用法示例

本文实例讲述了Yii框架中jquery表单验证插件用法。分享给大家供大家参考,具体如下: 运行效果图如下: 视图层: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"head meta http-equiv="Content-Type" content="text/html;charset=UTF-8" title/title style .error{ color: red; } /style script src="js/jquery.js"/script script src="js/jquery.validate.js"/script script src="js/messages_zh.js"/script script// 手机号码验证jQuery.validator.addMethod("phone", function(value, element) {var length = value.length;var mobile = /^1[3,5,8][0-9]{9}$/;return this.optional(element) || (length == 11 mobile.test(value));}, "请正确填写您的手机……