菜鸟学堂
在线运行
源代码
<!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="/assets/jquery-validation-1.14.0/demo/css/screen.css"> <script src="http://edu.jb51.net/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://edu.jb51.net/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://edu.jb51.net/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> <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> <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>
运行结果
在线运行
菜鸟学堂 edu.jb51.net