目前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
- 浏览 3772
- 评论(2)
- 论坛回复 / 浏览 (2 / 6461)
- 查看更多
相关推荐
### jQuery Validator 使用说明 #### 一、简介 jQuery Validator 是一款功能强大且易于使用的表单验证插件。它能够帮助开发者快速实现各种复杂的验证逻辑,提高用户体验并减少服务器端的压力。该插件由 Jörn ...
《jQuery表单检验插件ez validator v1.1 for PHPCMS2008详解》 在Web开发中,表单验证是不可或缺的一环,它能够确保用户输入的数据符合预设的规则,防止无效数据的提交,提升用户体验,降低服务器处理压力。PHPCMS...
Validator 是一个用于 Bootstrap 3 的,对用户友好的 HTML5 格式验证。 特点:通过 data-API 和标准 HTML5 的属性配置自定义的验证功能自定义错误信息通过 AJAX 输入域的验证 标签:Validator
<label for="email">邮箱: <!-- 其他表单元素... --> 提交 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="dist/js/bootstrapValidator.min.js"> $(document)....
<label for="email">邮箱: 请输入有效的邮箱地址"> 提交 ``` 三、验证规则 BootstrapValidator支持多种内置验证规则,例如:notEmpty(非空)、email(电子邮件)、integer(整数)、remote(远程验证)等。...
$.validator.addMethod("passwordStrength", function(value, element) { // 这里可以编写检查密码强度的逻辑 return this.optional(element) || /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/.test(value); }, "密码...
jQuery的Validator插件是用于表单验证的强大工具,它简化了复杂的前端数据验证过程,使得开发者可以使用简洁的代码实现多样化的验证规则。以下是对jQuery表单校验插件Validator的详细说明: **1. 引入所需文件** 在...
在上述代码中,我们首先设置了表单的HTML结构,然后使用jQuery选择器选取表单并调用bootstrapValidator方法。在验证规则中,我们要求用户名和密码都不能为空,且密码的长度需在6到20个字符之间。如果用户输入不符合...
$.validator.addMethod("uniqueUsername", function(value) { // 假设这里有一个Ajax请求,检查用户名是否已存在 return $.ajax({ url: "check_username.php", data: { username: value }, async: false // ...
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); }, "请输入有效的电子邮件地址"); ``` ...
<label for="name">Name: ``` 在这个例子中,我们定义了一个简单的表单,并使用jQuery Validation Plugin对其进行了验证。通过配置`rules`和`messages`选项,我们可以指定哪些字段需要验证以及相应的错误消息...
jQuery.extend(jQuery.validator.messages, { required: "请选择一个值", remote: "请选择一个值", email: "请输入有效的邮箱地址", url: "请输入有效的网址", date: "请输入有效的日期", dateISO: "请输入...
4. **自定义验证**:如果需要自定义验证规则,可以扩展jQuery的验证方法,通过`$.validator.addMethod()`实现。 ### 示例 ```html <label for="email">邮箱 请输入有效的邮箱地址"> 发送 ...
$.validator.addMethod("customRule", function (value, element) { // 验证逻辑 return value === "预期值"; }, "请输入正确的值"); ``` 然后,在表单元素上应用这个自定义规则: ```html ``` ### 5. 错误...
$.validator.addMethod("isMobile", function (value, element) { return this.optional(element) || /^1[3-9]\d{9}$/.test(value); }, "请输入正确的手机号码"); ``` 然后在规则中使用这个新方法: ```...
- 通过 `$.validator.addMethod` 动态添加新的验证规则。 - 支持在运行时更改验证规则。 - **国际化支持** - 支持多种语言的错误消息显示。 - 可以通过修改默认的错误消息来支持不同语言。 #### 五、常见问题与...
1. **格式化错误消息**:`jQuery.validator.format`方法可以用来格式化错误提示信息,使其更加友好和具体。 ```javascript var str = "Hello {0}, this is {1}"; alert("'" + str + "'"); // 显示原始字符串 ...
通过对jQuery Validate插件的`$.validator.prototype.elements()`方法进行自定义扩展,可以有效地解决相同`name`的多个元素只能验证第一个元素的问题,从而提高了表单验证的准确性和用户体验。这种方法特别适用于...
此外,jQuery Validate插件还支持自定义验证方法,可以通过`$.validator.addMethod`添加。例如,如果你需要检查用户名是否已存在,可以这样写: ```javascript $.validator.addMethod("uniqueUsername", function...