前言:之前写web项目还自己写表单验证,想想真是太天真了。jquery validate 前端验证框架,真TM 有种相见恨晚的感觉,而且是,这种开源的东西,用了以后,之后的学习成本会慢慢降低。瞬间感觉找到了组织,有木有!作为一名程序员,还是要关注开源,奉献开源。
首先:官方现在版本是1.30.0 版本;官方地址为:[url=http://jqueryvalidation.org/]http://jqueryvalidation.org/[/url] 国内环境,大家都懂,速度巨慢。
再给个地址:[url=http://www.w3cschool.cc/jquery/jquery-plugin-validate.html]http://www.w3cschool.cc/jquery/jquery-plugin-validate.html[/url]
但这个版本可能有点滞后,作为参考吧。
下面就给个小例子:
文档:[url=http://jqueryvalidation.org/documentation/]http://jqueryvalidation.org/documentation/[/url]
问题:
1、页面有多个表单,让其进入验证状态。
首先:官方现在版本是1.30.0 版本;官方地址为:[url=http://jqueryvalidation.org/]http://jqueryvalidation.org/[/url] 国内环境,大家都懂,速度巨慢。
再给个地址:[url=http://www.w3cschool.cc/jquery/jquery-plugin-validate.html]http://www.w3cschool.cc/jquery/jquery-plugin-validate.html[/url]
但这个版本可能有点滞后,作为参考吧。
下面就给个小例子:
<style>
<!--
/*jquery validate 前端验证提示信息的字体颜色.*/
label.error{margin-left: 10px; color: red;}
-->
</style>
<form method="post" id="pwdUpdate">
<input id="password" type="password" name="password"
data-rule-required="true" data-rule-minlength="6" >
<input type="password" name="password-cfm" data-rule-required="true"
data-rule-minlength="6" data-rule-equalTo="#password">
<button type="button" id="btnSave">保存</button>
</form>
<script src="/assets/js/jquery1.11.1-rc2.min.js"></script>
<!-- 引入 jquery validate 相关js -->
<script src="/assets/js/jquery.validate.min.js"></script>
<script src="/assets/js/messages_zh.min.js"></script>
<script type="text/javascript">
$(function() {
var form = $("#pwdUpdate");
form.validate();//验证指定的表单
$("#btnSave").click(function() {
if (form.valid()) {//如果表单验证成功,则进行提交。
//doSubmit();//提交表单.
} else {
// alert("失败");
}
});
});
</script>
文档:[url=http://jqueryvalidation.org/documentation/]http://jqueryvalidation.org/documentation/[/url]
问题:
1、页面有多个表单,让其进入验证状态。
/* 将所有指定的表单处在验证状态。 */
$.each($(".modal form"), function(i) {
/* alert("表单序号:" + i); */
$(this).validate();//验证表单.
});