<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <title> - jsFiddle demo</title>

  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>

  <link rel="stylesheet" type="text/css" href="/css/normalize.css">

  <link rel="stylesheet" type="text/css" href="/css/result-light.css">

      <script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>

      <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css">

      <script type='text/javascript' src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js"></script>

  <style type='text/css'>

    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>

<script type='text/javascript'>//<![CDATA[

$(window).load(function(){

$( "#frmLogin" ).validate({

    submitHandler: function( form ) {

        alert( "Call Login Action" );

    }

});

});//]]>  

</script>

</head>

<body>

  <meta name="viewport" content="width=device-width, initial-scale=1"> 

<div data-role="page" id="login">

    <div data-role="header">

        <h1>Acme Corporation</h1>

    </div>

    <div data-role="content">

        <form id="frmLogin" class="validate">

            <div data-role="fieldcontain">

                <label for="email"><em>* </em> Email: </label>

                <input type="text" id="email" name="email"

                    class="required email" />

            </div>

            <div data-role="fieldcontain">

                <label for="password"><em>* </em>Password: </label>

                <input type="password" id="password" name="password"

                    class="required" />

            </div>

            <div class="ui-body ui-body-b">

                <button class="btnLogin" type="submit"

                    data-theme="a">Login</button>

            </div>

        </form>

    </div>

</div>

</body>

</html>

jquery mobile validation的更多相关文章

  1. jQuery Mobile 和 Kendo UI 的比较（转）

    jQuery Mobile 和 Kendo UI 的比较 转自 https://www.oschina.net/translate/jquery-mobile-versus-kendo-ui?cmp ...

  2. jQuery Mobile入门

    转:http://www.cnblogs.com/linjiqin/archive/2011/07/17/2108896.html 简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的 ...

  3. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  4. jquery mobile 问问多多

    jquery mobile  问题多多,兼容性太差.android4.1下完全崩溃.以后再也不用jquery mobile了

  5. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  6. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...

  7. JQuery mobile中按钮自定义属性的改变

    1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...

  8. JQuery Mobile 页面参数传递

    在单页模版中使用基于HTTP的方式通过POST和GET请求传递参数,而在多页模版中不需要与服务器进行通信,通常在多页模版中有以下三种方法来实现页面间的参数传递. 1.GET方式:在前一个页面生成参数并 ...

  9. jQuery Mobile学习笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

随机推荐

  1. java匹配中文汉字的正则表达式

    正则表达式匹配中文先要了解中文的编码 代码如下 复制代码 [u4E00-u9FA5]汉字?[uFE30-uFFA0]全角字符 [u4E00-u9FA5]汉字?[uFE30-uFFA0]全角字符 匹配中 ...

  2. js cookie使用方法详解

    代码如下 复制代码 <script>function getCookie(c_name){ if (document.cookie.length>0){ //先查询cookie是否为 ...

  3. Swift属性

    属性的存储 属性的主要作用是存储数据,可以常量属性和变量属 性: struct FixedLengthRange { var firstValue: Int let length: Int } var ...

  4. MLlearning（1）——kNN算法

    这篇文章讲kNN(k近邻,k-Nearest Neighbour).这是一种lazy-learning,实现方便,很常用的分类方法.约定n为样本集中的样本数,m为样本的维度,则这个算法的训练复杂度为0 ...

  5. JS与PHP数组操作的不同

    JS与PHP数组操作的不同 1.JS 中向数组中添加元素,必须指定下标 2.php中向数组中添加元素,可以不指定下标(追加) 3.JS 中数组元素的下标,是连续 4.PHP中数组元素的下标,可以不连续 ...

  6. 暑假集训(4)第七弹——— 组合（hdu1850）

    题意概括:你赢得了第一局.魔鬼给出的第二局是,如果有N堆牌,先手的人有几种可能胜利. 问题分析:尼姆游戏,先得到n堆牌的数量异或和,再将异或和与每一个牌组的数量异或,如果结果小于原牌组数量 则可能++ ...

  7. CAF（C++ actor framework）(序列化之复杂类，分析 还有自己不懂的细思恐极函数实现）（三）

    这里应该是序列化的最后一篇.感觉自己写的不是很好,也一点点在学习.这次就不贴上代码了.代码在github上的announce5.cpp.代码简单,但是分析下去会有细思恐极的感觉! 先看一下几个函数是干 ...

  8. C++ 中 const 和 static 的作用

    目录 const 的主要应用如下: const 关键字使用的注意点: C++中static关键字有三个明显的作用: const的主要应用如下: const 用于定义常量:const定义的常量编译器可以 ...

  9. Call与Apply

    1.前言 ECMAscript中提供了两个方法(call,apply)用于改变对象内部的this指针,它们两个的作用都是一样的,但是传递的参数有点不大相同. 它们的大概语法为: call(this, ...

  10. JPA && Spring Data && Spring Data JPA

    1.JPA  Java Persistence API,用于对象持久化的一组API,JPA本身是一组规范,让开发者用同一种方式访问不同的ORM框架.其实也就是java实体对象和关系型数据库建立起映射关 ...