源代碼
點擊運行
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery Validate 插件 - 自定義消息作為元素數據</title> <link rel="stylesheet" media="screen" href="http://static./assets/jquery-validation-1.14.0/demo/css/screen.css"> <script src="http://static./assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static./assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://static./assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#commentForm").validate(); $("#commentForm2").validate({ messages: { email: { required: '請輸入!' } } }); }); </script> <style type="text/css"> form { width: 500px; } form label { width: 250px; } form label.error, form input.submit { margin-left: 253px; } </style> </head> <body> <div id="main"> <p>本實例演示了如何通過元數據自定義消息。</p> <!-- 通過 data- 屬性自定義規則和消息 --> <form class="cmxform" id="commentForm" method="post" action=""> <fieldset> <legend>請輸入您的電子郵件地址</legend> <p> <label for="cemail">E-Mail *</label> <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="請輸入您的電子郵件地址" data-msg-email="請輸入一個有傚的電子郵件地址" /> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> <!-- 自定義通過 validate 選項重載的元數據中 "required" 的消息 --> <form class="cmxform" id="commentForm2" method="post" action=""> <fieldset> <legend>請輸入您的電子郵件地址</legend> <p> <label for="cemail">E-Mail *</label> <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="請輸入一個有傚的電子郵件地址" /> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> </body> </html>
運行結果