推荐几款很酷的 JavaScript 表单美化以及验证插件

Ideal Forms

Ideal Forms 则是先进的响应式 HTML5 表单插件,它支持响应式的布局,表单元素界面精美。

主要特色:

  • 完全响应式;
  • 完美键盘操作支持;
  • 可定制的输入标签:select, radio, checkbox 以及 file;
  • 自定义的日期选择器
  • 本地化支持

表单验证的代码示例:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var options = {
   inputs: {
     'username' : {
       filters: 'required username exclude' ,
       data: { exclude: [ 'user' , 'username' , 'admin' ] }
     },
     'date' : { filters: 'date' },
     'comments' : {
       filters: 'min max' ,
       data: { min: 50, max: 200 }
     },
     'colors' : {
       filters: 'exclude' ,
       data: { exclude: [ 'default' ] },
       errors: { exclude: 'Choose a color from the list.' }
     },
     'langs[]' : {
       filters: 'min' ,
       data: { min: 2 },
       errors: { min: 'Check at least <strong>2</strong> languages.' }
     },
     'options' : {
       filters: 'min'
       data: { min: 1 },
       errors: { min: 'Check only <strong>1</strong> option.' }
     }
   }
};
 
var $myform = $( '#my-form' ).idealforms( options ).data( 'idealforms' );

支持的浏览器:IE8+, Webkit, Firefox, Opera, iOS5+, Android 4.0+。

插件下载      在线演示

 

jqTransform

jqTransform 这款表单插件已经出现相当长的一段时间。如果你想快速修改表单皮肤,你应该试试这个。

编写相应的代码,你就可以控制你想应用皮肤的表单元素。和上面的 Ideal Forms 相比,这个插件年代是有点久远了。

调用方法:

?
1
2
3
4
$( function () {
     //find all form with class jqtransform and apply the plugin
     $( "form.jqtransform" ).jqTransform();
});

插件下载      在线演示

 

Formly

令人难以置信的简单方法来添加风格和表单验证,Formly 给您的网站表单功能增添精彩。

轻松添加样式,验证,和一个单一的功能以及令人印象深刻的用户交互。可配置多个主题效果。

使用示例:

?
1
2
3
4
5
6
7
8
$(document).ready( function () {
 
     $( '#ContactInfo' ).formly({ 'theme' : 'Dark' }, function (e) {
         
         $( '.callback' ).html(e);
 
     });
});

插件下载      在线演示

 

jQuery.validationEngine

这款插件的校验提示效果很漂亮,基于 CSS3 实现,可以参考一下。

插件下载      在线演示

 

Niceform

Niceforms 是一个使用自定义设计的风格取代最常用的表单元素的脚本。

您可以使用所提供的默认主题,或以最小的努力开发你自己需要的外观样式。

插件下载      在线演示

  

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
众所周知,人工智能是当前最热门的话题之一, 计算机技术与互联网技术的快速发展更是将对人工智能的研究推向一个新的高潮。 人工智能是研究模拟和扩展人类智能的理论与方法及其应用的一门新兴技术科学。 作为人工智能核心研究领域之一的机器学习, 其研究动机是为了使计算机系统具有人的学习能力以实现人工智能。 那么, 什么是机器学习呢? 机器学习 (Machine Learning) 是对研究问题进行模型假设,利用计算机从训练数据中学习得到模型参数,并最终对数据进行预测和分析的一门学科。 机器学习的用途 机器学习是一种通用的数据处理技术,其包含了大量的学习算法。不同的学习算法在不同的行业及应用中能够表现出不同的性能和优势。目前,机器学习已成功地应用于下列领域: 互联网领域----语音识别、搜索引擎、语言翻译、垃圾邮件过滤、自然语言处理等 生物领域----基因序列分析、DNA 序列预测、蛋白质结构预测等 自动化领域----人脸识别、无人驾驶技术、图像处理、信号处理等 金融领域----证券市场分析、信用卡欺诈检测等 医学领域----疾病鉴别/诊断、流行病爆发预测等 刑侦领域----潜在犯罪识别与预测、模拟人工智能侦探等 新闻领域----新闻推荐系统等 游戏领域----游戏战略规划等 从上述所列举的应用可知,机器学习正在成为各行各业都会经常使用到的分析工具,尤其是在各领域数据量爆炸的今天,各行业都希望通过数据处理与分析手段,得到数据中有价值的信息,以便明确客户的需求和指引企业的发展。
众所周知,人工智能是当前最热门的话题之一, 计算机技术与互联网技术的快速发展更是将对人工智能的研究推向一个新的高潮。 人工智能是研究模拟和扩展人类智能的理论与方法及其应用的一门新兴技术科学。 作为人工智能核心研究领域之一的机器学习, 其研究动机是为了使计算机系统具有人的学习能力以实现人工智能。 那么, 什么是机器学习呢? 机器学习 (Machine Learning) 是对研究问题进行模型假设,利用计算机从训练数据中学习得到模型参数,并最终对数据进行预测和分析的一门学科。 机器学习的用途 机器学习是一种通用的数据处理技术,其包含了大量的学习算法。不同的学习算法在不同的行业及应用中能够表现出不同的性能和优势。目前,机器学习已成功地应用于下列领域: 互联网领域----语音识别、搜索引擎、语言翻译、垃圾邮件过滤、自然语言处理等 生物领域----基因序列分析、DNA 序列预测、蛋白质结构预测等 自动化领域----人脸识别、无人驾驶技术、图像处理、信号处理等 金融领域----证券市场分析、信用卡欺诈检测等 医学领域----疾病鉴别/诊断、流行病爆发预测等 刑侦领域----潜在犯罪识别与预测、模拟人工智能侦探等 新闻领域----新闻推荐系统等 游戏领域----游戏战略规划等 从上述所列举的应用可知,机器学习正在成为各行各业都会经常使用到的分析工具,尤其是在各领域数据量爆炸的今天,各行业都希望通过数据处理与分析手段,得到数据中有价值的信息,以便明确客户的需求和指引企业的发展。
好的,我可以给你一些基本的步骤来实现一个类似京东登录的网站。 1. 首先,你需要在 HTML 页面中引入 Bootstrap 的 CSS 和 JavaScript 文件,以及 jQuery 库。 ``` <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ZeJYlF6RfF8CfKU8X+6D25Vr5I1w5pF7Uyc+M4gBq5V7lG8C7HLLgF0X0hJbzHw8" crossorigin="anonymous"> <!-- jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-XXXXXXXXXXXX" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-XXXXXXXXXXXX" crossorigin="anonymous"></script> ``` 2. 接下来,在 HTML 页面中创建一个表单,包括用户名和密码的输入框以及登录按钮。 ``` <form> <div class="mb-3"> <label for="username" class="form-label">用户名</label> <input type="text" class="form-control" id="username" required> </div> <div class="mb-3"> <label for="password" class="form-label">密码</label> <input type="password" class="form-control" id="password" required> </div> <button type="submit" class="btn btn-primary">登录</button> </form> ``` 3. 在 JavaScript 中,为表单的提交事件添加一个监听器,在用户点击登录按钮时获取输入框中的值,并发送到后端进行验证。 ``` $('form').submit(function(event) { event.preventDefault(); // 阻止默认的表单提交行为 var username = $('#username').val(); var password = $('#password').val(); // 发送 AJAX 请求到后端进行验证 $.ajax({ url: '/login', method: 'POST', data: { username: username, password: password }, success: function(response) { // 登录成功,跳转到主页 window.location.href = '/home'; }, error: function(error) { // 登录失败,显示错误信息 $('#error-message').text('用户名或密码错误'); } }); }); ``` 4. 最后,你可以添加一些样式来美化登录表单,使它看起来更像京东登录。 ``` form { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .form-label { font-size: 16px; font-weight: 600; } .form-control { height: 50px; font-size: 16px; border-radius: 5px; box-shadow: none; } .btn-primary { height: 50px; font-size: 18px; font-weight: 600; border-radius: 5px; background-color: #e4393c; border: none; } .btn-primary:hover { background-color: #e6393a; } ``` 希望这些步骤能对你有所帮助,如果你还有任何问题或需要更多的帮助,请告诉我。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值