表单元素让人爱恨交加。作为网页最重要的组成部分&＃xff0c;表单几乎无处不在&＃xff0c;从简单的邮件订阅、登陆注册到复杂的需要多页填写的信息提交功能&＃xff0c;表单都让开发者花费了大量的时间和精力去处理&＃xff0c;以期实现好用又漂亮的表单功能。这篇文章向大家推荐几款很棒的 Javascript 表单美化和验证插件。
- 精心挑选12款优秀 jQuery Ajax 分页插件
- 经验分享&＃xff1a;10个简单实用的 jQuery 代码片段
- 分享8款效果精美的 jQuery 加载进度条插件
- 期待已久的2012年度最佳 jQuery 插件揭晓
- 精心挑选的优秀 Javascript 日历和时间插件
Ideal Forms
Ideal Forms 则是先进的响应式 HTML5 表单插件&＃xff0c;它支持响应式的布局&＃xff0c;表单元素界面精美。
主要特色&＃xff1a;
- 完全响应式&＃xff1b;
- 完美键盘操作支持&＃xff1b;
- 可定制的输入标签&＃xff1a;select, radio, checkbox 以及 file&＃xff1b;
- 自定义的日期选择器
- 本地化支持
表单验证的代码示例&＃xff1a;
var options &＃61; {inputs: {&＃39;username&＃39;: {filters: &＃39;required username exclude&＃39;,data: { exclude: [&＃39;user&＃39;, &＃39;username&＃39;, &＃39;admin&＃39;] }},&＃39;date&＃39;: { filters: &＃39;date&＃39; },&＃39;comments&＃39;: {filters: &＃39;min max&＃39;,data: { min: 50, max: 200 }},&＃39;colors&＃39;: {filters: &＃39;exclude&＃39;,data: { exclude: [&＃39;default&＃39;] },errors: { exclude: &＃39;Choose a color from the list.&＃39; }},&＃39;langs[]&＃39;: {filters: &＃39;min&＃39;,data: { min: 2 },errors: { min: &＃39;Check at least 2 languages.&＃39; }},&＃39;options&＃39;: {filters: &＃39;min&＃39;data: { min: 1 },errors: { min: &＃39;Check only 1 option.&＃39; }}}
};var $myform &＃61; $(&＃39;#my-form&＃39;).idealforms( options ).data(&＃39;idealforms&＃39;);
支持的浏览器&＃xff1a;IE8&＃43;, Webkit, Firefox, Opera, iOS5&＃43;, Android 4.0&＃43;。
插件下载 在线演示
jqTransform
jqTransform 这款表单插件已经出现相当长的一段时间。如果你想快速修改表单皮肤&＃xff0c;你应该试试这个。
编写相应的代码&＃xff0c;你就可以控制你想应用皮肤的表单元素。和上面的 Ideal Forms 相比&＃xff0c;这个插件年代是有点久远了。
调用方法&＃xff1a;
$(function() {//find all form with class jqtransform and apply the plugin$("form.jqtransform").jqTransform();
});
插件下载 在线演示
Formly
令人难以置信的简单方法来添加风格和表单验证&＃xff0c;Formly 给您的网站表单功能增添精彩。
轻松添加样式&＃xff0c;验证&＃xff0c;和一个单一的功能以及令人印象深刻的用户交互。可配置多个主题效果。
使用示例&＃xff1a;
$(document).ready(function() { $(&＃39;#ContactInfo&＃39;).formly({&＃39;theme&＃39;:&＃39;Dark&＃39;}, function(e) { $(&＃39;.callback&＃39;).html(e); });
});
插件下载 在线演示
jQuery.validationEngine
这款插件的校验提示效果很漂亮&＃xff0c;基于 CSS3 实现&＃xff0c;可以参考一下。
插件下载 在线演示
Niceform
Niceforms 是一个使用自定义设计的风格取代最常用的表单元素的脚本。
您可以使用所提供的默认主题&＃xff0c;或以最小的努力开发你自己需要的外观样式。
插件下载 在线演示
- 10套精美的免费网站后台管理系统模板
- 精心挑选6款优秀的 jQuery Tooltip 插件
- 推荐几款非常棒的 jQuery 全景图片展示插件
- 12款经典的白富美型 jQuery 图片轮播插件
- 分享12个效果精美的 Javascript 倒计时脚本
本文链接&＃xff1a;推荐几款好用的 Javascript 表单美化和验证插件
编译来源&＃xff1a;梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
京公网安备 11010802041100号