首先上控件的地址http://code.ciaoca.com/jquery/validation-engine/

具体使用方式网站里说的很清楚,我写这篇文章主要是用于记录如何自己添加自定义正则表达式,这个问题折腾了几次,刚刚才会搞。网上也查了很多,都没有说到点子上的,也许是我太笨没看懂。

进入正题,这个控件很强大,里面的验证足够我们使用,但是有时候我们项目需求可能比较独特,这里面没有怎么办?那就得自己写一个正则然后匹配了,但是我一开始就怎么都找不到该往哪里填入自定义正则。

以上是网站里写的,但是这段该往哪里填呢?在我们引入文件的时候,会引入这个文件<script src="js/jquery.validationEngine-zh_CN.js"></script>,是在这个文件里填!

当然聪明的人可能早找到地方了,但是我比较笨,到最后才想到是不是填到源文件里,果不其然。

'everyName': {
'regex': '^[\u4E00-\u9FA5]+$|^[0-9]*$|\·',     /* 自定义正则表达式 */
'alertText': '无效的姓名'      /* 验证不通过时的提示 */
}

这段是我填入的正则,是为了匹配一个姓名,要求是数字、汉字、外带一个“·”,不符合则提示错误,符合则通过,当然这种鬼一般不会有通用的正则,得你自己写或者合并。

在这里我要说几点小细节,这是我本次碰到的问题:

1.写正则的时候要记得将regex放在引号中

2.想要让几个正则组合同时匹配,用‘|’这个竖杠,这里要注意,用|貌似只能单方面匹配,也就是说当我写一个正则让匹配数字、汉字、外带一个“·”,他们单独输入的时候是正确通过的,但是如果合并在一起,或者任意两个搭配,那么就会不通过。所以我今天又换了种写法,^[\u4E00-\u9FA50-9\·]+$  ^是开始的意思$是结尾的意思+是至少匹配一次\u4E00-\u9FA5是汉字0-9是数字\·代表·,用[]把他们匹配要求括起来, []用来自定义能够匹配 '多种字符' 的表达式。

3.想要匹配某个特殊字符,例如我这个点“·”,那么只需要加个斜杠就可以例如\·,或者说你就要匹配一个字,例如想让“js”这两个字母也符合要求,因为我们的要求是中文和数字,英文是不符合要求的,我只想让这两个字母也符合要求怎么办?  \js这样就可以了

接下来我说一下这个控件的基础用法:

1首先引入文件

  1. <link rel="stylesheet" href="css/validationEngine.jquery.css">
  1. <script src="js/jquery.js"></script>
  2. <script src="js/jquery.validationEngine-zh_CN.js"></script>
  3. <script src="js/jquery.validationEngine.js"></script>
  4. 2然后给表单添加id
  1. <form id="form_id" ...>
  2. ...
  3. </form>
  4. 3开始在表单中使用

<input id="selectName1" type="text" class="validate[required,custom[everyName]]"  data-errormessage-value-missing="* 此处不可空白" data-errormessage="* 字符格式不正确,请重新输入"  />

首先,所有的验证都是在input的class里添加,validate[required]为必填的意思,而custom[everyName]则是正则匹配的要求了,具体可以看网站里,我这里的everyName是我自定义的。我试验了下custom[]内部只能填入一个且它本身也只能存在一个,不能多个。而validate[]的括号里面则可以填入多个,以逗号隔开,但是validate的本身只能存在一个。

validate[required,custom[number],maxSize[20],min[0]]   这段的意思是这是一个必填项,同时里面只能是数字,最多输入字符数为20,其中最小值为0

data-errormessage-value-missing="* 此处不可空白"   这段暂时理解为,如果含有required,它就会提示这句话,这句话可以自定义

data-errormessage="* 字符格式不正确,请重新输入"   这段的理解暂时为,如果不为空了,那么如果不符合我们自定义的正则及各种要求(只能是数字,最多输入字符数为20,其中最小值为0),则提示这句话,这句话也可以自定义。

以上就是这次使用的总结,主要是给自己看,以后如果忘了还能翻回来看O(∩_∩)O~

再记录一个,就是如果项目有开始时间和结束时间的话,要求是当选择了开始时间,那么在结束时间中,开始时间之前的就都不能被选择。反之,如果选择了结束时间,那么开始时间必须要在结束时间之前,之后的也都无法选择。需要一个js来控制。因为我们是用的bootstrap-datepicker这个控件,暂时在这里记录一下。

$(".times_ipt").eq(0).change(function(){
$(".times_ipt").eq(1).datepicker('setStartDate', $(this).val());
});
$(".times_ipt").eq(1).change(function(){
$(".times_ipt").eq(0).datepicker('setEndDate', $(this).val());
});
$(".times_p").eq(0).change(function(){
$(".times_p").eq(1).datepicker('setStartDate', $(this).val());
});
$(".times_p").eq(1).change(function(){
$(".times_p").eq(0).datepicker('setEndDate', $(this).val());
});

  1.  

验证控件jQuery Validation Engine简单自定义正则表达式的更多相关文章

  1. 验证控件jQuery Validation Engine调用外部函数验证

    在使用jQuery Validation Engine的时候,我们除了使用自带的API之外,还可以自己自定义正则验证.自定义正则验证上一篇已经讲过了,如果想使用自定义函数进行验证怎么办?其实这个控件有 ...

  2. jQuery插件之验证控件jquery.validate.js

    今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...

  3. jQuery验证控件jquery.validate.js使用说明

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  4. (转)jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  5. jQuery验证控件jquery.validate.js的使用介绍

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  6. jQuery验证控件jquery.validate.js使用说明+中文API(转)

    一导入js库<script src="../js/jquery.js" type="text/javascript"></script> ...

  7. jQuery验证控件jquery.validate.js使用说明+中文API

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 学习 ...

  8. JS验证控件jQuery Validate

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  9. jQuery验证控件jquery.validate.js汉化

    如需要修改,可在js代码中加入: jQuery.extend(jQuery.validator.messages, {  required: "必选字段",  remote: &q ...

随机推荐

  1. python :表单验证--对每一个输入框进行验证

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. table表格在设置文字垂直居中后,在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行

    table设置了垂直居中后在表格显示相同排列的数据(比如:testtesttesttsttesttesstestse很多的test)时此表格不能换行, 此时会导致table会把页面撑的很宽,导致表格后 ...

  3. linux下用用iptables做端口映射的shell

    情形一:跨网络.跨主机的映射Full-Nat 我们想到达主机B的80端口,但是由于网络限制可能无法直接完成.但是我们可以到达主机A的8080端口,而主机A可以直接到达B的80端口.这时候可以使用ipt ...

  4. HQL查询——select子句

    select子句 select子句用于选择指定的属性或者直接选择某个实体,当然select选择的属性必须是from之后持久化类包含的属性: select p.name from Person as p ...

  5. java.lang.classNotFound:明明已经导入了jar包,包里也有该类,却找不到的解决方法

    试一下:在web-inf文件夹下新建lib文件夹:将所有需要用到的jar包放在lib中,重启tomcat.

  6. CentOS 7 程序自启动的问题

    Mysql具体的安装方法见http://www.cnblogs.com/yoyotl/p/5752437.html 但是关于自启动部分需要多一些说明. 一.问题现象: 系统重启后,发现mysqld服务 ...

  7. 读《编写可维护的JavaScript》第八章总结

    第八章 避免“空比较” 我们在对传进来的参数做处理之前,肯定需要验证一下是否是我们想要的,也就是说大多数情况下,我们需要对比一下它的类型. 作者首先给了一个看起来都感觉不对的代码: var Contr ...

  8. 远程执行shellcode

    #include "Windows.h" #include <WinSock2.h> #include <stdio.h> #pragma comment( ...

  9. ie6、7下 text-indent 问题

    text-indent属性 用于文字缩进,更多是用来隐藏文字.比如,一个logo标题,上面的问题很有艺术感,不得不把文字和背景组合成一张背景图(此处页面元素用a表示),但处于SEO方面的考虑,需要把a ...

  10. Python notes

    1. range()函数的使用: a = range(n) # a = range(0,n) b = range(m,n) # b = range(m,n) alist = list(a) # ali ...