validationengine如何自定义验证信息_analytical engine

validationengine如何自定义验证信息_analytical engineValidationEngine是一款基于Jquery的js表单验证插件。相对于之前的传统表单验证工具,其优点是自定义验证内容更广泛以及与AJAX的方便整合。附件提供了该插件,解压密码为:im486,Js目录下为ValidationEngine所需js文件(不包括jquery),css目录下的validationEngine.jquery.css为本插件样式文件,demo为示例文件(其

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

1.基本用法

1 <link rel="stylesheet" href="/css/validationEngine.jquery.css">
2 <script src="/js/jquery.validationEngine.js"></script>

1 <input id="my1" name="my1" type="text" class="validate[required]">

1 <script language="Javascript">
2 <!--
3 jQuery(document).ready(function(){
4     jQuery("#my_form").validationEngine('attach');
5 });
6 -->
7 </script>

2:options 参数

名称 默认值 说明
validationEventTrigger “blur” 触发验证的事件,支持事件可参考 jQuery 的事件说明。
scroll true 屏幕自动滚动到第一个未通过验证的位置
focusFirstField true 验证未通过时,第一个未通过的控件是否设置为焦点
promptPosition “topRight” 验证提示信息的位置,可设置为:”topRight”, “bottomLeft”,
“centerRight”, “bottomRight”
autoPositionUpdate false 是否自动调整提示层的位置
bindMethod “bind” 验证事件的绑定方式,可设置为:bind, live
binded false 是否已经绑定其他事件,设为 true 将不进行验证。
inlineAjax false  
ajaxFormValidation false 使用 Ajax 验证表单
ajaxFormValidationURL false 设置 Ajax 验证的 URL,默认使用 form 的 action 属性
ajaxValidCache {}  
onAjaxFormComplete $.noop 表单提交,Ajax 验证完成后的行为(Function)
onBeforeAjaxFormValidation $.noop 表单提交验证规则通过后,Ajax 验证之前的行为(Function)
onValidationComplete false 表单提交验证完成时的行为(Function)可以得到两个参数:表
单元素 和 验证结果(ture or false)
onSuccess false 实时验证所有项目都通过时,发生的行为(Function)
onFailure false 实时验证有未通过项目时,发生的行为(Function)PS:
onSuccess 和 onFailure 在禁用实时验证时无效。
isOverflown false 表单是否在溢出滚动的元素内(即外部元素设置了 overflow:scroll)
overflownDIV “” 设置了溢出滚动的元素,格式为 jQuery 的选择器。
showArrow true  
isError false  
InvalidFields []  

(1)参数如何配置

1 <script language="Javascript">
2 <!--
3 $("#my_form").validationEngine("attach",{
4     promptPosition:"centerRight",
5     scroll:false
6 });
7 -->
8 </script>


3.写在class中的验证类型及方法设置参数

名称 示例 说明
required validate[required] 必填项
optional validate[optional] 可选项。若不输入,不要求必填,若有输入,则验证
其是否符合要求。
dateRange[name] validate[dateRange[grp1]] 验证日期范围
dateTimeRange[name] validate[dateTimeRange[grp1]] 验证日期及时间范围
minSize[int] validate[minSize[6]] 最少输入字符数
maxSize[int] validate[maxSize[20]] 最多输入字符数
groupRequired[name] validate[groupRequired[grp2]] 群组中至少输入一项
min[int] validate[min[1]] 最小值(数值的最小值)
max[int] validate[max[9999]] 最大值(数值的最大值)
past[date] validate[past[2012/12/20]] 日期必需在 date 或 date 的将来。格式为 YYYY/
MM/DD、YYYY/M/D、YYYY-MM-DD、YYYY-M-D
 或 now。
future[date] validate[future[now]] 日期必须在 data 或 date 的过去。
maxCheckbox[int] validate[maxCheckbox[2]] 最多选取的项目数(用于Checkbox)
minCheckbox validate[minCheckbox[2]] 最少选取的项目数(用于Checkbox)
equals validate[equals[id]] 当前控件值需与 id 这个控件的值相同
phone validate[custom[phone]] 验证电话号码
email validate[custom[email]] 验证 Email 地址
integer validate[custom[integer]] 验证整数
number validate[custom[number]] 验证数字
date validate[custom[date]] 验证日期
dateFormat validate[custom[dateFormat]] 验证日期格式
dateTimeFormat validate[custom[dateTimeFormat]] 验证日期及时间格式,格式为:YYYY/
MM/DD hh:mm:ss AM|PM
ipv4 validate[custom[ipv4]] 验证 ipv4 地址
url validate[custom[url]] 验证 url 地址,需以 http://、https://
 或 ftp:// 开头
onlyNumberSp validate[custom[onlyNumberSp]] 只接受填数字和空格
onlyLetterSp validate[custom[onlyLetterSp]] 只接受填英文字母(大小写)和单引号(‘)
onlyLetterNumber validate[custom[onlyLetterNumber]] 只接受数字和英文字母
ajax validate[ajax[ajaxUserCallPhp]] 在验证规则中自定义

“ajaxUserCallPhp”:{

“url”:”phpajax/ajaxValidateField

User.php”,

“extraData”:”name=eric”,

“alertTextOk”:”* 此帐号名称可以使用”,

“alertText”:”* 此名称已被其他人使用”,

“alertTextLoad”:”* 正在确认帐号

名称是否有其他人使用,请稍等。”

}

funcCall validate[funcCall[functionName]] 调用外部函数

(1)完整的例子是:

<input id=”my1″ name=”my1″ type=”text”  class=”validate[required,minSize[6],

custom[onlyLetterNumber]]”>,多个规则用英文的逗号分隔



4.Validation Engine的API 方法参数

名称
默认值
说明

validationEventTrigger
“blur”
触发验证的事件,支持事件可参考 jQuery 的事件说明。

scroll
true
屏幕自动滚动到第一个未通过验证的位置

focusFirstField
true
验证未通过时,第一个未通过的控件是否设置为焦点

promptPosition
“topRight”
验证提示信息的位置,可设置为:”topRight”, “bottomLeft”, 

“centerRight”, “bottomRight”

autoPositionUpdate
false
是否自动调整提示层的位置

bindMethod
“bind”
验证事件的绑定方式,可设置为:bind, live

binded
false
是否已经绑定其他事件,设为 true 将不进行验证。

inlineAjax
false
 

ajaxFormValidation
false
使用 Ajax 验证表单

ajaxFormValidationURL
false
设置 Ajax 验证的 URL,默认使用 form 的 action 属性

ajaxValidCache
{}
 

onAjaxFormComplete
$.noop
表单提交,Ajax 验证完成后的行为(Function)

onBeforeAjaxFormValidation
$.noop
表单提交验证规则通过后,Ajax 验证之前的行为(Function)

onValidationComplete
false
表单提交验证完成时的行为(Function)可以得到两个参数:表

单元素 和 验证结果(ture or false)

onSuccess
false
实时验证所有项目都通过时,发生的行为(Function)

onFailure
false
实时验证有未通过项目时,发生的行为(Function)PS:

onSuccess 和 onFailure 在禁用实时验证时无效。

isOverflown
false
表单是否在溢出滚动的元素内(即外部元素设置了 overflow:scroll)

overflownDIV
“”
设置了溢出滚动的元素,格式为 jQuery 的选择器。

showArrow
true
 

isError
false
 

InvalidFields
[]
 

(1).ajax验证表单

如果要实现ajax验证的话,需要添加一条规则:ajax[ajaxUserCallPhp]],例如<input id=”my1″ 

name=”my1″ type=”text”  class=”validate[required,minSize[6],custom[onlyLetterNumber]],ajax[ajaxUserCallPhp]]”>

注意这个ajaxUserCallPhp是在jquery.validationEngine-zh_CN.js中有个属性ajaxUserCallPhp

里面有详细的设定

(2).如何判断该表单是否已经通过所有的验证

if($("#hyForm").validationEngine('validate')){ ...    }

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/186110.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • vue页面刷新_vue强制重置组件

    vue页面刷新_vue强制重置组件vue页面刷新首先我们都知道vue属于单页面应用,默认境况下是不会触发刷新页面操作的,所以这个时候就需要我们通过事件来触发reload()来达到刷新操作接下来我就为大家介绍三种刷新页面的方法1.wiindow.location.reload([bForceGet])该方法强迫浏览器刷新当前页面bForceGet可选参数,默认为false,从客户端缓存里取当前true,则以get方式,从服务器端获取最新的页面,相当于页面f5刷新wiindow.location.replace(URL)

    2022年10月16日
    1
  • WebService使用实例

    WebService使用实例

    2022年2月7日
    36
  • python中griddata_python – 来自xyz数据的Matplotlib轮廓:griddata无效索引[通俗易懂]

    python中griddata_python – 来自xyz数据的Matplotlib轮廓:griddata无效索引[通俗易懂]我正在尝试使用具有以下格式的文件的matplotlib来绘制等高线图:x1y1z1x2y2z2等等我可以用numpy.loadtxt加载它来获取向量.到目前为止,没有麻烦.我读这个是为了学习如何绘图,并且可以通过复制粘贴来重现它,所以我确定我的安装没有错:我知道我必须输入x和y作为矢量,z作为数组输入,这可以用griddata完成.这也是我在这个网站上找到的.文件说:zi=gridda…

    2022年5月26日
    39
  • 视频编码器mpeg4_mpeg1234是什么格式

    视频编码器mpeg4_mpeg1234是什么格式来自http://blog.csdn.net/dansin/article/details/389149MPEG-4编解码学习.1.视频数据编码的办法对数据进行编码的目的前面以前提过,一方面降低数据体积,一方面保留数据携带的信息量..对于视频数据,我们要做的将是降低数据何积和保证数据解码后的视觉效果.视频数据编码一般有三个方法:a.去除时间冗余度(时间冗余度是指视频数据在各帧之

    2022年9月18日
    2
  • winfrom DotNetBar sideNav控件使用问题

    winfrom DotNetBar sideNav控件使用问题sideNav初始UI在最开始的界面,不知道设置了什么东西,然后没有那个东西最后又新建了个项目,一个一个对比参数。还是没找到!倒是发现几个其他的参数属性在这里记录下这是分别对应的是对sideNav的sideNavPanel的折叠最大化隐藏功能,可以设置为false,取消对应图标。当查完sideNav所以属性后,没有发现不同点,…

    2025年6月18日
    2
  • input = file 实现上传文件

    input = file 实现上传文件使用input=file实现文件上传功能,如果点击提交按钮,提交表单并上传选中的文件:<FormItemlabel=”上传简历”><divclassName=”section-pushInChannel-fileInput”><inputid=”file”onChange={this.handleFileChange}t…

    2022年7月16日
    12

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号