<script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script>
表单验证第一步(添加表单验证):javascript
$(document).ready(function(){ $("#form").validate({}); });
表单验证第二步(form表单里面的dom元素添加class 或属性 提交时被验证):java
<input id="username" name="username" type="text" value="" class="required"> <input id="username" name="username" type="text" value="" maxlength="50">
验证错误是的提示信息:jquery
<input id="username" name="username" title="用户名必填,最大长度50" type="text" value="" class="required" maxlength="50"> >
表单验证的时候有时候会有特殊需求,如错误提示的展示方式:固定位置,弹出框,自定义位置ajax
$(document).ready(function(){ $("#form").validate({ errorPlacement:callback }); }); function callback(error, element) { error.appendTo(element.parent());//固定位置 } function callback(error, element) { tipsFloor(element,2,"red","用户名必填,最大长度50")//自定义 可弹出框 }
表单验证添加自定义方法app
$.validator.addMethod( "rulename", function(value,element,params){ if(params[0] > 50) { return false; } }, "用户名必填,最大长度50" )
使用自定义方法dom
$(document).ready(function(){ $("#form").validate({ rules:{ DOMname:{ rulename:function() { return $("#domid").val() } } } }); });
表单验证经过时调用处理过程ui
$(document).ready(function(){ $("#form").validate({ submitHandler: function(form) { form.submit(); } errorPlacement:callback }); }); $(document).ready(function(){ $("#form").validate({ submitHandler: function(form) { form_sava()//ajax请求提交表单 return false; } errorPlacement:callback }); });