jQuery Validate 插件為表單提供了強大的驗證功能，讓客戶端表單驗證變得更簡單，同時提供了大量的定制選項，滿足應(yīng)用程序各種需求。
請在這里查看示例 validate示例
示例包含
源碼示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title>demo</title> <script src="../js/jquery-1.11.3.min.js"></script> <script src="js/jquery.validate.min.js"></script> <script src="js/messages_zh.min.js"></script> <style> * { margin: 0; padding: 0; } body, html { width: 100%; height: 100%; } .red { color: red; } .green { color: green; } </style> </head> <body> <form id="form"> <div> <input type="text" name="a" /> </div> <div> <input type="submit" value="提交"> <input class="reset" type="button" value="重置"> </div> </form></body> <script> $(function() { var validator = $('#form').validate({ submitHandler:function(form){ $('body').append('表單驗證成功，發(fā)送了一個請求'); }, rules: { a: { required: true, isEven: true,// 使用自定義的驗證規(guī)則 }, }, messages: { a: { required: '<div><span class="red">*</span><span>此項必填</span></div>', isEven: '<div><span class="red">*</span><span>不是偶數(shù)</span></div>', }, }, // 驗證成功后的回調(diào) success: function(label) { label.html('<div><span class="green">*</span><span>通過驗證</span></div>'); } }); // 自定義驗證 jQuery.validator.addMethod('isEven', function(value, element) { return this.optional(element) || !(value%2); }, '請輸入一個偶數(shù)'); // 重置表單 $(".reset").click(function() { validator.resetForm();// 插件方法-刪除錯誤提示 $('#form')[0].reset();// 原生方法-清空輸入內(nèi)容 }); });</script> </html>相關(guān)閱讀：
jQuery Validate插件自定義驗證規(guī)則的方法
基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗組件思路詳解
jQuery easyui的validatebox校驗規(guī)則擴(kuò)展及easyui校驗框validatebox用法
以上所述是小編給大家介紹的jQuery.Validate表單驗證插件的使用示例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
新聞熱點
疑難解答
