`
Wingel
  • 浏览: 118011 次
  • 性别: 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
能够更完善验证组件!

相关推荐

    jquery_validator说明

    ### jQuery Validator 使用说明 #### 一、简介 jQuery Validator 是一款功能强大且易于使用的表单验证插件。它能够帮助开发者快速实现各种复杂的验证逻辑,提高用户体验并减少服务器端的压力。该插件由 Jörn ...

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

    《jQuery表单检验插件ez validator v1.1 for PHPCMS2008详解》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,防止无效数据的提交,提升用户体验,降低服务器处理压力。PHPCMS...

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

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

    bootStrapValidator

    &lt;label for="email"&gt;邮箱: &lt;!-- 其他表单元素... --&gt; 提交 &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt; &lt;script src="dist/js/bootstrapValidator.min.js"&gt; $(document)....

    bootstrapValidator表单验证插件

    &lt;label for="email"&gt;邮箱: 请输入有效的邮箱地址"&gt; 提交 ``` 三、验证规则 BootstrapValidator支持多种内置验证规则,例如:notEmpty(非空)、email(电子邮件)、integer(整数)、remote(远程验证)等。...

    jquery validate例子

    $.validator.addMethod("passwordStrength", function(value, element) { // 这里可以编写检查密码强度的逻辑 return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/.test(value); }, "密码...

    jQuery表单校验插件validator使用方法详解

    jQuery的Validator插件是用于表单验证的强大工具,它简化了复杂的前端数据验证过程,使得开发者可以使用简洁的代码实现多样化的验证规则。以下是对jQuery表单校验插件Validator的详细说明: **1. 引入所需文件** 在...

    bootstrap,bootstrapValidator实现登录(login)页面

    在上述代码中,我们首先设置了表单的HTML结构,然后使用jQuery选择器选取表单并调用bootstrapValidator方法。在验证规则中,我们要求用户名和密码都不能为空,且密码的长度需在6到20个字符之间。如果用户输入不符合...

    jQuery.validate插件(附代码实例)

    $.validator.addMethod("uniqueUsername", function(value) { // 假设这里有一个Ajax请求,检查用户名是否已存在 return $.ajax({ url: "check_username.php", data: { username: value }, async: false // ...

    jquery jquery表单验证实用例子

    jQuery.validator.addMethod("email", function(value, element) { return this.optional(element) || /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value); }, "请输入有效的电子邮件地址"); ``` ...

    jquery.validate使用攻略

    ### jQuery.Validate 使用攻略详解 #### 一、简介与基本用法 **jQuery Validate** 是一个强大的表单验证插件,它极大地简化了前端表单验证的过程,并提供了丰富的内置验证规则和自定义验证功能。该插件非常适合...

    jQuery验证框架

    &lt;label for="name"&gt;Name: ``` 在这个例子中,我们定义了一个简单的表单,并使用jQuery Validation Plugin对其进行了验证。通过配置`rules`和`messages`选项,我们可以指定哪些字段需要验证以及相应的错误消息...

    jquery.validate

    jQuery.extend(jQuery.validator.messages, { required: "请选择一个值", remote: "请选择一个值", email: "请输入有效的邮箱地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入...

    JQuery验证框架jqBootstrapValidation.zip

    4. **自定义验证**:如果需要自定义验证规则,可以扩展jQuery的验证方法,通过`$.validator.addMethod()`实现。 ### 示例 ```html &lt;label for="email"&gt;邮箱 请输入有效的邮箱地址"&gt; 发送 ...

    jQuery-Validation范例

    $.validator.addMethod("customRule", function (value, element) { // 验证逻辑 return value === "预期值"; }, "请输入正确的值"); ``` 然后,在表单元素上应用这个自定义规则: ```html ``` ### 5. 错误...

    jQuery表单验证例子

    $.validator.addMethod("isMobile", function (value, element) { return this.optional(element) || /^1[3-9]\d{9}$/.test(value); }, "请输入正确的手机号码"); ``` 然后在规则中使用这个新方法: ```...

    jquery表单验证大全

    - 通过 `$.validator.addMethod` 动态添加新的验证规则。 - 支持在运行时更改验证规则。 - **国际化支持** - 支持多种语言的错误消息显示。 - 可以通过修改默认的错误消息来支持不同语言。 #### 五、常见问题与...

    jquery.validate知识要点

    1. **格式化错误消息**:`jQuery.validator.format`方法可以用来格式化错误提示信息,使其更加友好和具体。 ```javascript var str = "Hello {0}, this is {1}"; alert("'" + str + "'"); // 显示原始字符串 ...

    关于jquery.validate.js 相同name的多个元素只能验证第一个元素的解决办法

    通过对jQuery Validate插件的`$.validator.prototype.elements()`方法进行自定义扩展,可以有效地解决相同`name`的多个元素只能验证第一个元素的问题,从而提高了表单验证的准确性和用户体验。这种方法特别适用于...

    jQuery中validate表单提交校验Demo

    此外,jQuery Validate插件还支持自定义验证方法,可以通过`$.validator.addMethod`添加。例如,如果你需要检查用户名是否已存在,可以这样写: ```javascript $.validator.addMethod("uniqueUsername", function...

Global site tag (gtag.js) - Google Analytics