菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <!DOCTYPE html> <html> <head> <title>jQuery Validate 插件 - jQuery Mobile 表单验证</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.css"> <!--[if gte IE 9]><!--><script src="//cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script><!--<![endif]--><!--[if lt IE 9]><script src="//cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script><script src="//cdn.staticfile.org/html5shiv/r29/html5.min.js"></script><script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> <script src="https://cdn.bootcss.com/jquery-mobile/1.4.5/jquery.mobile.min.js"></script> <script src="/public/jquery/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="/public/jquery/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> <style> label.error { color:red; font-size:16px; font-weight:normal; line-height:1.4; margin-top:0.5em; width:100%; float:none; } $@media screen and (orientation:portrait){ label.error { margin-left:0; display:block; } } $@media screen and (orientation:landscape){ label.error { display:inline-block; margin-left:22%; } } $em { color:red; font-weight:bold; padding-right:.25em; } </style> </head> <body> <div id="page1" data-role="page"> <div data-role="header"> <h1>欢迎</h1> </div> <div data-role="content"> <form method="GET"> <div data-role="fieldcontain"> <label for="email">Email:</label> <input type="email" name="email" id="email" /> </div> <div data-role="fieldcontain"> <label for="password">密码:</label> <input type="password" name="password" id="password" /> </div> <input data-role="submit" type="submit" value="登录" /> </form> </div> </div> $<script> $('#page1').bind('pageinit', function(event) { $('form').validate({ rules:{ email:{ required:true }, password:{ required:true } } }); }); </script> </body> </html>
运行结果