jQuery实现响应HTML5表单

PHP中文网
リリース: 2016-05-17 09:08:11
オリジナル
1814 人が閲覧しました

 JQ-idealforms的是一个小的框架来构建很棒响应HTML5表单。


966.jpg


特点:

  • 充分响应

  • 键盘支持

  • 可自定义的输入类型选择,单选,多选和文件

  • 表单输入提示

  • 自定义日期选择器

  • 在线验证validation

支持:

  • 浏览器: IE8+, Webkit, Firefox, Opera, iOS5+, Android 4.0+

  • jQuery: 1.7+, UI 1.8+

  • 许可证: GPL or MIT

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<script src="js/min/jquery.idealforms.js"></script>
<script>
 
  var options = {
 
    onFail: function() {
      alert( $myform.getInvalid().length +&#39; invalid fields.&#39; )
    },
 
    inputs: {
      &#39;password&#39;: {
        filters: &#39;required pass&#39;,
      },
      &#39;username&#39;: {
        filters: &#39;required username&#39;,
        data: {
          //ajax: { url:&#39;validate.php&#39; }
        }
      },
      &#39;file&#39;: {
        filters: &#39;extension&#39;,
        data: { extension: [&#39;jpg&#39;] }
      },
 
      &#39;comments&#39;: {
        filters: &#39;min max&#39;,
        data: { min: 50, max: 200 }
      },
      &#39;states&#39;: {
        filters: &#39;exclude&#39;,
        data: { exclude: [&#39;default&#39;] },
        errors : {
          exclude: &#39;Select a State.&#39;
        }
      },
      &#39;langs[]&#39;: {
        filters: &#39;min max&#39;,
        data: { min: 2, max: 3 },
        errors: {
          min: &#39;Check at least <strong>2</strong> options.&#39;,
          max: &#39;No more than <strong>3</strong> options allowed.&#39;
        }
      }
    }
  };
 
  var $myform = $(&#39;#my-form&#39;).idealforms(options).data(&#39;idealforms&#39;);
 
  $(&#39;#reset&#39;).click(function(){ $myform.reset().fresh().focusFirst() });
  $myform.focusFirst();
 
</script>
ログイン後にコピー

以上就是jQuery实现响应HTML5表单的内容,更多相关内容请关注PHP中文网(www.php.cn)!

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート