您的当前位置：首页 jQuery实现响应HTML5表单

jQuery实现响应HTML5表单

来源：汇智养生

JQ-idealforms的是一个小的框架来构建很棒响应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>