本文主要包含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>以上就是jQuery实现响应HTML5表单的内容，更多相关内容请关注微课江湖（）！