jquery mobile validation

<!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

时间: 2024-08-05 08:57:31

jquery mobile validation的相关文章

jQuery Mobile中表单的使用体会

jQuery Mobile是手机端(移动端)页面制作用的框架,包括CSS和JavaScript,此处简单总结一下表单的书写,主要涉及CSS部分.框架提供了表单的一些样式,但在实际使用的时候,我们可能会用自己的自定义样式,这种情况下,框架提供的样式可能就不能满足我们的要求.今天项目中写登录页面的静态网页,碰到了几个问题,在这里和大家交流一下. 1 利用data-role="none" 在使用表单的时候,如果想使用自定义样式,就可以表单元素上给data-role属性赋值none,意思就是不

史上最简单的个人移动APP开发入门--jQuery Mobile版跨平台APP开发

书是人类进步的阶梯. ——高尔基 习大大要求新新人类要有中国梦,鼓励大学生们一毕业就创业.那最好的创业途径是什么呢?就是APP.<构建跨平台APP-jQuery Mobile移动应用实战>就是一本写给没钱没身份没资历的创业小白看的APP书,看完这本书你可以拥有自己的一个APP,不用花钱就能移植到其他移动平台,支持iOS,Android,Windows Phone!!!!!!!!找个最便宜的来练手吧!  小白APP交流Q群:  348632872 清华大学出版社推出的<构建跨平台APP:j

jquery mobile常用的data-role类型介绍

转自原文 jquery mobile常用的data-role类型介绍 data-role参数表: page        页面容器,其内部的mobile元素将会继承这个容器上所设置的属性 header     页面标题容器,这个容器内部可以包含文字.返回按钮.功能按钮等元素 footer       页面页脚容器,这个容器内部也可以包含文字.返回按钮.功能按钮等元素 content     页面内容容器,这是一个很宽容的容器,内部可以包含标准的html元素和jQueryMobile元素 cont

jQuery Mobile学习笔记

1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) 2.需要使用数据属性,数据属性是HTML5引入的,以data-开头 比如data-role可以用于定义页眉,页脚,内容,页面等 data-role="page" 是在浏览器中显示的页面. data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者

jquery mobile 移动web(2)

button 按钮 data-role="button" 将超链接变成button. 具有icon 图标的button 组件. 提供了18常用的图标 data-icon ="" 1.arrow-1左箭头 2.arrow-r 右箭头 3.arrow-u 上箭头 4.arrow-d 下箭头 5.delete 删除 6.plus 加号 7.minus 减号 8.check 对号 9.gear 齿轮 10.refresh 刷新 11.forward 前进 12.back 返

jquery mobile 教程

简介:jQuery Mobile框架可以轻松的帮助我们实现非常好看的.可跨设备的Web应用程序.我们将后续的介绍中向大家介绍大量的代码及实例. jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的,没有特别为移动应用程序设计. jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾.它是基本jQuery框架并提供了一定范围的用户接口和特性,以便于开发人员在移动应用上使用.使用该框架可以节省大量的js代

jquery mobile的一些插件(图片滚动)

jquery mobile的一些插件(图片滚动) 1,photoswipe 网址:http://www.photoswipe.com/demo: http://www.photoswipe.com/latest/examples/04-jquery-mobile.html个人描述:在手机上操作很流畅,能自使用屏幕尺寸,竖屏显示效果很好,横屏图片太大了,也就是列数固定的原因. 2,Touch-Gallery 网址:http://neteye.github.com/touch-gallery.htm

jQuery Mobile 手动显示ajax加载器

在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更好一些. 先看两个方法,显示和关闭,方法来自于参考:http://blog.csdn.net/zht666/article/details/8563025 <script> //显示加载器 function showLoader() { //显示加载器.for jQuery Mobile 1.2.

jQuery Mobile 手机网页开发的 两个问题

============问题描述============ 问题1: 怎么动态修改主题....我想做个夜间模式...用户点击按钮的时候,改变jQuery Mobile里page的主题....怎么用jQuery 修改.. 问题2:$.Mobile 这个对象有多少方法什么的啊,哪里有参考的,我去搜了,都是一些不全的,没有像开发文档之类的吗.. 我搜到的都是 http://www.w3school.com.cn/jquerymobile/jquerymobile_examples.asp http://