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" οnclick="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" οnclick="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;
}