欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery实现响应HTML5表单

程序员文章站 2022-04-21 22:37:22
...
JQ-idealforms的是一个小的框架来构建很棒响应HTML5表单。


jQuery实现响应HTML5表单


特点:

  • 充分响应

  • 键盘支持

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

  • 表单输入提示

  • 自定义日期选择器

  • 在线验证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 +' invalid fields.' )
    },
 
    inputs: {
      'password': {
        filters: 'required pass',
      },
      'username': {
        filters: 'required username',
        data: {
          //ajax: { url:'validate.php' }
        }
      },
      'file': {
        filters: 'extension',
        data: { extension: ['jpg'] }
      },
 
      'comments': {
        filters: 'min max',
        data: { min: 50, max: 200 }
      },
      'states': {
        filters: 'exclude',
        data: { exclude: ['default'] },
        errors : {
          exclude: 'Select a State.'
        }
      },
      'langs[]': {
        filters: 'min max',
        data: { min: 2, max: 3 },
        errors: {
          min: 'Check at least <strong>2</strong> options.',
          max: 'No more than <strong>3</strong> options allowed.'
        }
      }
    }
  };
 
  var $myform = $('#my-form').idealforms(options).data('idealforms');
 
  $('#reset').click(function(){ $myform.reset().fresh().focusFirst() });
  $myform.focusFirst();
 
</script>

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

相关标签: jQuery HTML5表单