实例首页
自学教程
IT工具箱
源代码
下载代码
上下布局
点击运行 >
<!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://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"> <link rel="stylesheet" media="screen" href="http://t.runoops.com/js/lib/jqueryvalidation-1.19.5/demo/css/screen.css" /> <link rel="stylesheet" href="http://t.runoops.com/js/lib/jqueryvalidation-1.19.5/demo/css/cmxform.css" /> <script src="http://t.runoops.com/js/lib/jquery.js"></script> <script src="http://t.runoops.com/js/lib/jqueryvalidation-1.19.5/jquery.validate.min.js"></script> <script src="http://t.runoops.com/js/lib/jqueryvalidation-1.19.5/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>
运行结果：