引入相关文件:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js" type="text/
javascript"></script>
<script src="js/jquery.validationEngine-en.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/validationEngine.jquery.css" type="text/css"/>

使用实例:

邮箱验证:
<input value="someone@nowhere.com" class="validate[required,custom[email]]" type="text" name="email" id="email" />
日期验证:
<input value="2010-12-01" class="validate[required,custom[date]]" type="text" name="date" id="date" />
数字验证:
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" />
URL验证:
<input value="http://" class="validate[required,custom[url]] text-input" type="text" name="url" id="url" data-prompt-position="topLeft" />
必填验证:
<input value="" class="validate[required] text-input" type="text" name="req" id="req" data-prompt-position="bottomLeft" />
数字字母验证:
<input value="too many spaces obviously" class="validate[required,custom[onlyLetterNumber]]" type="text" name="special" id="special" data-prompt-position="bottomRight" />
自定义验证:
<input value="" class="validate[required,funcCall[checkHELLO]]" type="text" id="lastname" name="lastname" />
function checkHELLO(){
alert('Hello World!');
}
AJAX验证:
<input value="" class="validate[required,custom[onlyLetterNumber],maxSize[20],ajax[ajaxUserCall]] text-input" type="text" name="user" id="user" />
"ajaxUserCall": {
"url": "ajaxValidateFieldUser",
"extraData": "name=eric",
"extraDataDynamic": ['#user_id', '#user_email'],
"alertText": "* This user is already taken",
"alertTextOk": "All good!",
"alertTextLoad": "* Validating, please wait"
},
多选验证:
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck1" value="5"/>
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck2" value="3"/>
<input class="validate[minCheckbox[2]]" type="checkbox" name="group1" id="maxcheck3" value="9"/>

jQuery.validationEngine前端验证的更多相关文章

  1. Jquery ValidationEngine 修改验证提示框的位置

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 使用 jQuery 进行前端验证

    前段验证脚本的教程,其基础为jQuery的插件validate.    一.可以验证哪些信息 要求输入不能为空 要求输入格式必须为电子邮箱 要求输入格式必须为URL 要求输入格式必须为日期 要求输入格 ...

  3. 使用 jQuery 进行前端验证 -- 1

    如今很多的网站偶会有不同层次的验证去验证用户输入的信息是否符合我们所需要的数据类型.并且可以说任何有输入的地方都需要的去验证,验证一方面是要求用户输入正确格式的数据,同时也是避免恶意的用户进行非法的输 ...

  4. jQuery Validate前端验证

    我们经常看到如下效果,那么它是如何实现的呢?看下面: 废话少说,直接上代码,大家直接Copy就能看到上面的效果啦. <html> <head> <title>验证内 ...

  5. jquery前端验证框架

    1.validationEngine.jquery.css  样式包 2.jquery.validationEngine-zh_CN.js 中文语言包 3.jquery.validationEngin ...

  6. 关于引入多个jquery冲突的问题(附一个很好用的validate前端验证框架及使用方法)

    废话不多说,进入正题: 如果一个jsp中想要使用两个不同版本的jquery怎么办呢?客官往下看: <script src="${ctxStatic}/jquery/jquery-1.8 ...

  7. jQuery结合Ajax实现简单的前端验证和服务端查询

    上篇文章写了简单的前端验证由传统的JavaScript转向流畅的jQuery滑动验证,现在拓展一下,使用Ajax实现用户体验比较好的异步查询,同样还是从建立一个简单的表单开始 <form nam ...

  8. Javascript配合jQuery实现流畅的前端验证

    做前端时一般都习惯用JavaScript进行表单的简单验证比如非空验证和正则表达式验证,这样过滤后的数据提交到服务端再由专门的控制器做数据处理,这样能减轻服务器的负担,下面看一下前端验证的简单步骤: ...

  9. 简单的jQuery前端验证码校验

    简单的jQuery前端验证码校验2 html; <!DOCTYPE html> <html lang="zh-cn"> <head> <m ...

随机推荐

  1. 查看MDB格式文件数据表

    当打开一个MDB格式的ACCESS文件后,如果里面默认的都是窗体视图,要查看数据表的信息,可以“创建-查询设计”查看表信息,或是在SQL视图中编写SQL语句来实现. 或按着Shift键打开文件.

  2. Spring 整合hibernante 错误java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener

    1.将所需的jar包全部拷贝到WEB-INF/lib下,再重新启动tomcat便能顺利通过了.参考http://blessht.iteye.com/blog/1104450 最佳答案   spring ...

  3. 最近做OpenWrt的总结

    用到了哪些东西 需要在OpenWrt上开发一个客户端,用C语言写还比较方便,最开始在linux上跑,后面移植到路由器上,做成ipk.除了稍微修改了下Makefile,其他的什么都没改. 因为需要做个配 ...

  4. 再看static数据成员

    当将类的某个数据成员声明为static时,该静态数据成员只能被定义一次,而且要被同类的所有对象共享.各个对象都拥有类中每一个普通数据成员的副本,但静态数据成员只有一个实例存在,与定义了多少类对象无关. ...

  5. leetcode Linked List Cycle II python

    # Definition for singly-linked list. # class ListNode(object): # def __init__(self, x): # self.val = ...

  6. Linux学习之修改主机名

    1.临时修改主机名 显示主机名: oracle@localhost:~$ hostname localhost 修改主机名: oracle@localhost:~$ sudo hostname orc ...

  7. Struts2问题,已解决No result defined for action and result input

    struts2.1.8 必须在struts.xml中配置namespace属性 如果你在2.0中一切OK,但是在2.1中确出现了No result defined for action的异常,就是在因 ...

  8. python 连接数据库-设置oracle ,mysql 中文字符问题

    import cx_Oracle import MySQLdb def conn_oracle(): cnn = cx_Oracle.connect('用户名','密码','ip:端口号/数据库') ...

  9. Scala主构造器、私有构造器、构造器重载

    Scala中的主构造器跟在定义类的时候声明类名之后 如下: class scala(arg : String) { // } private[this] 修饰该字段只能被当前所对应的对象所访问,其他对 ...

  10. 帝国cms <!--list.var1-->产生不同样式

    制作帝国列表模板正常情况下 列表内容模板(list.var) (*) 写 <li class=''>[!--title--]<a href='[!--titleurl--]'> ...