`
Wingel
  • 浏览: 114426 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

validator for jQuery

阅读更多

目前jQuery网站上已经有了From的验证框架,FromValidation,但是一直觉得它的框架并不好用,因为重复写的东西太多了。
<!---->于是就再次写了自己的JavaScript验证框架,完全废弃掉以前的。
<!---->在新的框架下,是以这样子的用法设计的:
<!---->首先,要包括自己的js文件(这点不必说),而且在包括自己写,要先包括jQuery的,如下
<!---->

xml 代码
 
  1. <script type="text/javascript" src="jquery-latest.js"></script>  
  2. <script type="text/javascript" src="wingel.js"></script>  
<decorator:head>
然后在要验证的Form里面加个属性validatable=true,如下:
</decorator:head>
xml 代码
 
  1. <form id="registerForm" action="user-register.action" validatable="true">  
注意,这边不要加onsubmit方法

接下来,就好了,比如说有个输入框:
xml 代码
 
  1. <ww:textfield name="name" id="name"/>  

我想验证,让它必填,如下就可以了:
xml 代码
 
  1. <label for="name" validate="required">请填写名称<!---->label>  
  其中 for属性里面填的要是验证的输入框id,validate填的是验证方法,;label里面的文本就是验证不过的时候要显示的信息。
如果我想验证一个输入框的输入值长度怎么办,这样子就行了
xml 代码
 
  1. <label for="password" validate="lengthRange:6;20">  
后面的参数用;号隔开,验证的方法名跟参数用: 隔开。
wingel.js里面已经包括了一些常用的验证方法,现在问题来了,如果要自定义验证方法怎么办,如下办:
比如你想加个验证方法是hello
则label里面的validate属性写成hello,
然后加一个JavaScript方法:
js 代码
 
  1. <script type=< span="">"text/javascript">  
  2.     wingel.validator.rules.hello= function(value, element, parameters,utility) {  
  3.              ...    }  
  4. </script>  

里面三个参数, , couldn't input Chinese. now English will be used.

 

The first parameter is the value of the input element you want to validate,the second one is the validated element, the third one, is the parameters you add in validate label, the last one, is a utility class, you can invoke its method to make your code easier.

分享到:
评论
2 楼 Wingel 2006-12-09  
相信我,那些提示代码值得。你不应该自己给框架的使用者指定提示信息的位置,而应该让用户自己来指定。
我一开始也是用那种验证方式,不过后来那种方法让我废弃掉了。表面上看起来,用户啥都不用管,不用写提示信息,但是其实这却是最脏的手法,因为你不应该自己随意给用户安排提示信息的格式,位置。
1 楼 fantasy 2006-11-29  
不错,但是如果要实现这样的验证,需要在html中潜入太多的提示代码建议参考下.
http://www.iteye.com/topic/32983或者http://www.iteye.com/topic/36302
能够更完善验证组件!

相关推荐

    Bootstrap3jQuery插件Validator-for-Bootstrap-3.zip

    Validator 是一个用于 Bootstrap 3 的,对用户友好的 HTML5 格式验证。 特点:通过 data-API 和标准 HTML5 的属性配置自定义的验证功能自定义错误信息通过 AJAX 输入域的验证 标签:Validator

    jQuery 表单检验插件 ez validator v1.1 for PHPCMS2008.rar

    所有源文件及演示以及PDF手册,都在附件中,请下载使用

    Jquery表单验证插件formValidator使用方法

    使用步骤: 1.首先在项目中添加必备js与css   2.代码中添加引用(必备引用) ...--jquery必须库--&gt; [removed][removed] &lt;!--表单验证必须库--&gt; &lt;script src="formValidator1/formValidatorRegex.js" ty

    JS组件Form表单验证神器BootstrapValidator

    来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件: [removed][removed] [removed][removed] &...

    jquery.validate.js 多个相同name的处理方式

    1、将引入的插件:jquery.validate.js 第484行的代码注释: // select only the first element for each name, and only those with rules specified  //if ( this.name in rulesCache || !validator.objectLength...

    深入学习jQuery Validate表单验证(二)

    本文实例介绍了jQuery Validate表单验证,分享给大家供大家参考,具体内容如下 一、添加一个另外一个插件jquery.validate.messages_cn.js。...jQuery.extend(jQuery.validator.messages, { required: "必选字

    ssm(spring+spring mvc+mybatis)电子商城项目

    日期选择插件:Datepicker for Bootstrap 弹层组件:Layer 数据图表:Echarts 表单美化插件:ICheck 树形视图插件:Ztree 主要功能包括注册和登录、商品浏览、个人信息管理、购物车、我的订单、网上支付、评价。

    ssm(spring+spring mvc+mybatis)高仿小米电子商城项目实例

    日期选择插件:Datepicker for Bootstrap 弹层组件:Layer 数据图表:Echarts 表单美化插件:ICheck 树形视图插件:Ztree 电子商城系统模版:小米官网 主要功能包括注册和登录、商品浏览、个人信息管理、购物车、我...

    ssm shiro redis dubbo 小米商城后台管理系统(CMS) H+前端框架

    日期选择插件:Datepicker for Bootstrap 弹层组件:Layer 数据图表:Echarts 表单美化插件:ICheck 树形视图插件:Ztree 后台管理系统模版:H+ 电子商城系统模版:小米官网 演示官网: www.yb7s.cn 账号:admin ...

    Spring MVC4.3.5+MyBatis3.4.2+Apache Shiro1.3.2整合开发高仿小米商城的后台用户管理系统

    日期选择插件:Datepicker for Bootstrap 弹层组件:Layer 数据图表:Echarts 表单美化插件:ICheck 树形视图插件:Ztree 后台管理系统模版:H+ 电子商城系统模版:小米官网 部署: 1、具备运行环境:JDK1.7+、...

    mybatis框架,jsp毕业设计源码,电子商城系统

    mybatis框架,jsp毕业设计源码,电子商城系统源码,主要功能包括注册和登录、商品浏览、个人信息管理、购物车、我的订单、网上支付、评价。 开发环境: Eclipse ,JDK 1.8 ,Tomcat7 ...日期选择插件:Datepicker for

    Vue.js如何优雅的进行form validation

    现有的插件vuejs/vue-validator · GitHub只能实现普通验证,但如何解决1,因为vue-validator没有把校验规则给抽象出来,没办法,现在只能自己代码上再抽出一层rules来管理。remote validation只能

    单点登录源码

    FluentValidator | 校验框架 | [https://github.com/neoremind/fluent-validator](https://github.com/neoremind/fluent-validator) Thymeleaf | 模板引擎 | [http://www.thymeleaf.org/](http://www.thymeleaf.org/...

    千方百计笔试题大全

    166、如何用JQuery进行表单验证? 39 167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求?...

    java面试宝典

    166、如何用JQuery进行表单验证? 39 167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求?...

Global site tag (gtag.js) - Google Analytics