目前jQuery网站上已经有了From的验证框架,FromValidation,但是一直觉得它的框架并不好用,因为重复写的东西太多了。
<!---->于是就再次写了自己的JavaScript验证框架,完全废弃掉以前的。
<!---->在新的框架下,是以这样子的用法设计的:
<!---->首先,要包括自己的js文件(这点不必说),而且在包括自己写,要先包括jQuery的,如下
<!---->
xml 代码
- <script type="text/javascript" src="jquery-latest.js"></script>
- <script type="text/javascript" src="wingel.js"></script>
<decorator:head>
然后在要验证的Form里面加个属性validatable=true,如下:
</decorator:head>
xml 代码
- <form id="registerForm" action="user-register.action" validatable="true">
注意,这边不要加onsubmit方法
接下来,就好了,比如说有个输入框:
xml 代码
- <ww:textfield name="name" id="name"/>
我想验证,让它必填,如下就可以了:
xml 代码
- <label for="name" validate="required">请填写名称<!---->label>
其中 for属性里面填的要是验证的输入框id,validate填的是验证方法,;label里面的文本就是验证不过的时候要显示的信息。
如果我想验证一个输入框的输入值长度怎么办,这样子就行了
xml 代码
- <label for="password" validate="lengthRange:6;20">
后面的参数用;号隔开,验证的方法名跟参数用: 隔开。
wingel.js里面已经包括了一些常用的验证方法,现在问题来了,如果要自定义验证方法怎么办,如下办:
比如你想加个验证方法是hello
则label里面的validate属性写成hello,
然后加一个JavaScript方法:
js 代码
- <script type=< span="">"text/javascript">
- wingel.validator.rules.hello= function(value, element, parameters,utility) {
- ... }
- </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.
分享到:
- 2006-11-21 16:31
- 浏览 3739
- 评论(2)
- 论坛回复 / 浏览 (2 / 6369)
- 查看更多
相关推荐
Validator 是一个用于 Bootstrap 3 的,对用户友好的 HTML5 格式验证。 特点:通过 data-API 和标准 HTML5 的属性配置自定义的验证功能自定义错误信息通过 AJAX 输入域的验证 标签:Validator
所有源文件及演示以及PDF手册,都在附件中,请下载使用
使用步骤: 1.首先在项目中添加必备js与css 2.代码中添加引用(必备引用) ...--jquery必须库--> [removed][removed] <!--表单验证必须库--> <script src="formValidator1/formValidatorRegex.js" ty
来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3。从描述中我们就可以知道它至少需要jQuery、bootstrap的支持。我们首先引入需要的js组件: [removed][removed] [removed][removed] &...
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.messages_cn.js。...jQuery.extend(jQuery.validator.messages, { required: "必选字
日期选择插件:Datepicker for Bootstrap 弹层组件:Layer 数据图表:Echarts 表单美化插件:ICheck 树形视图插件:Ztree 主要功能包括注册和登录、商品浏览、个人信息管理、购物车、我的订单、网上支付、评价。
日期选择插件:Datepicker for Bootstrap 弹层组件:Layer 数据图表:Echarts 表单美化插件:ICheck 树形视图插件:Ztree 电子商城系统模版:小米官网 主要功能包括注册和登录、商品浏览、个人信息管理、购物车、我...
日期选择插件:Datepicker for Bootstrap 弹层组件:Layer 数据图表:Echarts 表单美化插件:ICheck 树形视图插件:Ztree 后台管理系统模版:H+ 电子商城系统模版:小米官网 演示官网: www.yb7s.cn 账号:admin ...
日期选择插件:Datepicker for Bootstrap 弹层组件:Layer 数据图表:Echarts 表单美化插件:ICheck 树形视图插件:Ztree 后台管理系统模版:H+ 电子商城系统模版:小米官网 部署: 1、具备运行环境:JDK1.7+、...
mybatis框架,jsp毕业设计源码,电子商城系统源码,主要功能包括注册和登录、商品浏览、个人信息管理、购物车、我的订单、网上支付、评价。 开发环境: Eclipse ,JDK 1.8 ,Tomcat7 ...日期选择插件:Datepicker for
现有的插件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请求?...
166、如何用JQuery进行表单验证? 39 167、Prototype如何实现页面局部定时刷新? 40 168、Prototype如何为一个Ajax添加一个参数? 40 169、Ajax请求总共有多少种Callback? 41 170、Javascript如何发送一个Ajax请求?...