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 - 自定义验证器 我们经常使用的一组自定义 parsley.js 验证器。 贡献并帮助我们使这个库成长！ 适合搭配：
Parsleyjs 是一个用来对 Web 表单的输入数据进行验证的 JavaScript 库，无需另写一行 JavaScript 代码。中文版本：https://git.oschina.net/dahouge/Parsley.js 主要特性 基于超棒的用户体验超级方便配置超轻量级...
Parsley，是一款强大的JavaScript表单验证插件，可以帮助你只使用简单的配置即可实现表单验证功能，这完全基于它的强大DOM-API。 主要特性： 基于超棒的用户体验 超级方便配置 超轻量级(压缩后12K），支持...
javascript表单验证 - Parsley.js使用和配置.docx
香菜 JavaScript表单验证，而无需实际编写任何JavaScript代码！版本2.9.2文件参见index.html和doc/要求 > = 1.8（与2.x和3.0兼容）的如果要支持IE8）问题？ 请在提问，并确保包含parsley.js标记。 请提供一个示例，...
大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧;天介绍的Parsley同样也可以帮助你只使用简单的配置即可实现表单验证功能，基于它的强大DOM-API,感兴趣的你可以不要错过了哦
在线演示 大家还记得我们曾经介绍过的表单验证jquery插件jquery.validationEngine吧，使用这个插件你不需要写任何一行js代码就可以生成一个功能强大的表单验证功能。是不是超棒？ 今天介绍的Parsley同样也可以帮助你...
该库目前尚未实现，并且与 Parsley JS 的最新版本不兼容。 作者建议您使用此因为人们似乎已成功使用它。WTForms-ParsleyJS这是什么？ 这是一个小型库，您可以将其挂接到 WTForms 表单类中以启用客户端验证。 允许您...
jquery密码强度正则表达式代码是一款jquery密码强度验证检测特效。
Parsley，最终的 JavaScript 表单验证库。 验证表单前端从未如此强大和简单。 与其他表单验证库不同，只需在表单 HTML 标签中用英文写下您的要求，剩下的事由 Parsley 完成！ 甚至不需要为简单的表单验证编写一行 ...
欧芹英国电话号码 用于验证英国电话号码的插件 ... script src =" parsley.min.js " > </ script > 将 data 属性添加到您要验证的任何字段： < input type =" text " data-parsley-ukphonenumber />
#Knockout Parsley 用于 Knockout JS 的验证。 许可证： ＃＃用法 // Init the plugin ko . parsley . init ( '#main-form' ) ; var viewModel = { // Add a simple rule to the observable value1 : ko . ...
灰烬香菜用于最终JavaScript表单验证库的Ember CLI插件安装ember install:addon ember-parsley在您的Ember CLI项目文件夹中ember install:addon ember-parsley用法模板示例： < form > < label> Password ...
SilverWare验证器 表单验证模块，它支持替代的... 该模块随附使用Parsley.js的后端： SilverStripe\Core\Injector\Injector : ValidatorBackend : class : SilverWare\Validator\Backends\ParsleyBackend 该模块
一些功能包括： CSS自动前缀带有BrowserSync的内置预览服务器图像优化通过Bower自动连接依赖项gulpfile通过使用Babel来利用ES2015功能 要求您必须安装Node.js和Bower。 安装克隆存储库（或从GitHub下载zip） git ...
fe-note 这里记录了我的前端笔记。 Requirements node版本需要在7.6.0或更高 Run npm install npm start 访问 Index ...js ...对第三方js库的尝试 ...parsley(表单验证) openlayers(地图) 其它 dd(模仿黄韬写的工具类)