parsley.js是一个表单验证的js，功能十分强大。
官网：http://parsleyjs.org。
应用实例：http://parsleyjs.org/doc/index.html#psly-frontend-form-validation
也可以看下版本parsley-1.x.js，里面与后来的parsley-2.x.js还是有很多的不同。
eg:引用parsley验证 1.x ：data-validate="parsley"，
2.x :data-parsley-validate="true"/data-parsley-validate
里面是很多实例。
我用的parsley-2.0.3.js，他依赖jQuery.js>1.8的版本。注意引入jquery.js及parsley.css。
实例如下：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:social="http://spring.io/springsocial"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout">
<head>
<title>用户登录</title>
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/app/web/parsley/parsley.css}" />
<script th:src="@{/app/web/jquery/jquery-1.11.1.min.js}"></script>
<script th:src="@{/app/web/parsley/parsley-2.0.3.js}"></script>
<script type="text/javascript">
function refresh(obj) {
obj.src = "/obiz/app/sudoor/captcha-image.html?"+Math.random();
}
</script>
</head>
<body>
<div id="content" layout:fragment="content">
<p><span style="color:red" th:text="${errorMsg}">13 February 2011</span></p>
<form action="" method="POST" data-parsley-validate="true">
<p>
登录名：<input name ="username" type="text" data-trigger="change" data-parsley-error-message="请输入登录名..." required="required" ></input>
</p>
<p>
密码：<input name="password" type="password" data-trigger="change" required="required" data-parsley-length="[8, 20]" data-parsley-required-message="请输入密码..." data-parsley-length-message="长度大于8小于20"></input>
</p>
<p>
</p>
<p>
验证码：<input name="_captcha" type="text" data-trigger="change" required="required" data-parsley-required-message="请输入验证码..."></input>
<img alt="验证码" style="cursor:pointer" onclick="javascript:refresh(this);" src="/obiz/app/sudoor/captcha-image.html"></img>
</p>
<p>
<a href="">忘记登录密码?</a>
</p>
<p>
<button type="submit" style="cursor:pointer">登录</button>
</p>
</form>
</div>
</body>
</html>
这里面有一些别的代码，不过还是可以看明白的。
还可以用到jquery.remote.js
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:social="http://spring.io/springsocial"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout">
<head>
<title>用户注册</title>
<link rel="stylesheet" type="text/css" media="screen" th:href="@{/app/web/parsley/parsley.css}" />
<script th:src="@{/app/web/jquery/jquery-1.11.1.min.js}"></script>
<script th:src="@{/app/web/parsley/parsley.remote.js}"></script>
<script th:src="@{/app/web/parsley/parsley-2.0.3.js}"></script>
<script type="text/javascript">
function refresh(obj) {
obj.src = "/obiz/app/sudoor/captcha-image.html?"+Math.random();
}
$(document).ready(function(){
$('#_captcha').parsley()
.addAsyncValidator('mycustom', function (xhr) {
alert("xhr.status");
return 404 === xhr.status;
}, 'http://localhost:8080/obiz/app/account/remote');
});
</script>
</head>
<body>
<div id="content" layout:fragment="content">
<form action="#" method="POST" th:action="@{/app/account/register}" data-parsley-validate="true">
<p>
注册用户：<input name="username" required="required" type="text"></input>
</p>
<p>
密码：<input name="password" type="password"></input>
</p>
确认密码：<input type="password"></input>
<p>
</p>
<p>
验证码：<input id="_captcha" name="_captcha" type="text" data-parsley-trigger="focusout" data-parsley-remote="http://localhost:8080/obiz/app/account/remote" data-parsley-remote-validator='mycustom' ></input>
<img alt="验证码" style="cursor:pointer" onclick="javascript:refresh(this);" src="/obiz/app/sudoor/captcha-image.html"></img>
</p>
<p>
<button type="submit">注册</button>
</p>
</form>
</div>
</body>
</html>
@RequestMapping("/remote")
public String remote(HttpServletRequest request,Model model){
String adb = "{\"d\":\"ddddddddddddddd\"}";
return adb;
}
相关推荐
**Parsley.js** 是一个强大的前端验证框架，专门用于JavaScript，它的主要目的是在用户提交表单之前确保输入数据的有效性和正确性。这个框架通过添加轻量级的DOM数据属性和事件来实现验证，无需编写复杂的JavaScript...
Parsley.js 是一个强大的前端验证库，它允许开发者在用户提交表单前进行实时验证，从而提供更好的用户体验。在给定的标题“parsley.js-validators:几个自定义 parsley.js 验证器的集合”中，我们可以理解这是一个...
Parsley.js的JavaScript库允许你自定义验证规则，扩展验证行为，甚至全局设置验证的触发时机和错误消息。例如，你可以通过JavaScript调用`Parsley.addValidator`方法来创建一个新的验证器。 在实际使用中，Parsley....
### JavaScript表单验证 - Parsley.js使用和配置 #### 概述 在现代Web开发中，表单验证是一项至关重要的任务。它不仅提高了用户界面的友好性和可用性，还能够帮助开发者确保数据的有效性和安全性。Parsley.js是一...
Parsleyjs 是一个用来对 Web 表单的输入数据进行验证的 JavaScript 库，无需另写一行 JavaScript 代码。中文版本：https://git.oschina.net/dahouge/Parsley.js 主要特性 基于超棒的用户体验超级方便配置超轻量级...
Parsley，是一款强大的JavaScript表单验证插件，可以帮助你只使用简单的配置即可实现表单验证功能，这完全基于它的强大DOM-API。 主要特性： 基于超棒的用户体验 超级方便配置 超轻量级(压缩后12K），支持...
在线演示 大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧，使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能。是不是超棒？ 今天介绍的Parsley同样也可以帮助你...
香菜 JavaScript表单验证，而无需实际编写任何JavaScript代码！版本2.9.2文件参见index.html和doc/要求 > = 1.8（与2.x和3.0兼容）的如果要支持IE8）问题？ 请在提问，并确保包含parsley.js标记。 请提供一个示例，...
接下来是Parsley，这是一个JavaScript库，专门用于客户端的表单验证。Parsley通过添加数据属性到HTML元素中，可以轻松地实现验证规则，例如非空、邮箱格式、最小长度等。它支持自定义验证规则，并且可以在验证失败时...
该库目前尚未实现，并且与 Parsley JS 的最新版本不兼容。 作者建议您使用此因为人们似乎已成功使用它。WTForms-ParsleyJS这是什么？ 这是一个小型库，您可以将其挂接到 WTForms 表单类中以启用客户端验证。 允许您...
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧;天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能，基于它的强大DOM-API,感兴趣的你可以不要错过了哦
jquery密码强度正则表达式代码是一款jquery密码强度验证检测特效。
Parsley，最终的 JavaScript 表单验证库。 验证表单前端从未如此强大和简单。 与其他表单验证库不同，只需在表单 HTML 标签中用英文写下您的要求，剩下的事由 Parsley 完成！ 甚至不需要为简单的表单验证编写一行 ...
欧芹英国电话号码 用于验证英国电话号码的插件 ... script src =" parsley.min.js " > </ script > 将 data 属性添加到您要验证的任何字段： < input type =" text " data-parsley-ukphonenumber />
3. **Parsley.js**：轻量级但功能齐全的验证插件，支持多种语言，提供多种验证规则，并且可以方便地与其他前端库集成。 ### 三、jQuery Validation Plugin详解 #### 1. 安装与初始化 首先，需要引入jQuery库和...
2. parsley.js：另一个强大的验证插件，它支持自定义验证规则，且具有实时验证和友好的错误提示功能。 3. validate.js：轻量级验证插件，适用于小型项目，提供基本的验证功能。 三、自定义验证规则 除了使用现成...
- **Parsley.js**：具有强大的验证功能，支持前端和后端验证，提供良好的API和文档。 ### 4. 使用步骤 - **引入库**：在HTML文件中引入jQuery库和相应的验证库。 - **标记表单元素**：使用HTML5的`required`属性或...
#Knockout Parsley 用于 Knockout JS 的验证。 许可证： ＃＃用法 // Init the plugin ko . parsley . init ( '#main-form' ) ; var viewModel = { // Add a simple rule to the observable value1 : ko . ...
在Laravel框架中，Parsley是一个非常有用的前端验证库，它可以与后端的FormRequest规则相结合，提供用户友好的实时验证。`laravel-parsley`项目是将Laravel的FormRequest验证规则转化为Parsley可以理解的格式，使得...