Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Happy.js:轻量级的 jQuery 表单验证插件

Happy.js:轻量级的 jQuery 表单验证插件

作者头像
Denis
发布于 2023-04-15 07:20:33
发布于 2023-04-15 07:20:33
2.3K00
代码可运行
举报
文章被收录于专栏:WordPress果酱WordPress果酱
运行总次数:0
代码可运行

网络上有很多的表单验证插件,但是很多功能非常强悍,如果你只是需要一个最简洁的,那么 Happy.js 就是一个很好的选择。

Happy.js 介绍

Happy.js 是一个轻量级的 jQuery 表单验证插件,默认只支持一些简单的输入框验证(必填,数据,数字,e-mail,最小/最大,和电话号码),但是简单增加一些行和正则,就能扩展。

Happy.js 使用

第一步:定义表单:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<form id="awesomeForm" action="/lights/camera" method="post">
  <input id="yourName" type="text" name="name" />
  <input id="email" type="text" name="email" />
</form>

第二步:定义验证模式

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$('#awesomeForm').isHappy({
	fields: {
		'#yourName': {
			required: true,
			message: '名字是必须的'
		},
		'#email': {
			required: true,
			message: 'email也是必须的',
			test: happy.email 
		}
	}
});

这样两步就可以了,Happy.js 就会验证每个每个字段当该字段正在输入的时候,并且提交的时候会验证所有的字段,如果验证失败:

这个字段就会被加上一个 unhappy 的 class。 这个字段右侧会加上一个 class 为 unhappyMessage,id 为该字段的 id 加上 _unhappy 的 <span> 如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<span id="textInput1_unhappy" class="unhappyMessage">请输入你的 email ​</span>

下载:Happy.js


本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
用jquery实现表单验证_jquery验证插件
功能强大的 jQuery 表单验证插件,适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外,还可以添加自定义的验证规则。
全栈程序员站长
2022/11/09
4.4K0
JQuery 学习—JQuery Validation表单验证范例[通俗易懂]
jQuery Validato表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。
全栈程序员站长
2022/07/19
1.8K0
jQuery Validate插件实现表单验证
jQuery Validate插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供可选的定制选项,以满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括URL和电子邮件验证,同时提供了一个使用编写用户自定义方法的API。所有的捆绑方法替换使用英语作为错误信息,并已翻译成其他37种语言。
别团等shy哥发育
2023/02/25
1.4K0
jQuery Validate插件实现表单验证
纯CSS实现表单验证
在我们的日常业务中,表单验证是个很常见设计需求,像一些登录注册框,问卷调查也都需要用到表单验证。
陈大鱼头
2020/04/16
1.6K0
纯CSS实现表单验证
HTML5 表单验证 API
HTML5 表单验证在现代浏览器中得到了广泛支持。但在使用新特性时,仍需考虑兼容性问题。可以使用特性检测来提供优雅的降级处理:
空白诗
2024/12/13
1280
表单数据验证方法(一)—— 使用validate.js实现表单数据验证
 好久没写博客了,真的是罪过,以后不能这样了,只学习不思考,学的都是白搭,希望在博客园能记录下自己学习的点滴,虽然记录的都是些浅显的技术,但能起到巩固自己和稍微帮助一下和我一样的菜鸡也是不错的,哈哈,不好意思,闲话扯多了。
CherishTheYouth
2019/09/11
5.7K0
表单数据验证方法(一)—— 使用validate.js实现表单数据验证
使用jQuery Validation插件来验证表单
jQuery Validation是一个用于验证表单的jQuery插件,简单易用,已经包含了16种内置的验证规则.Github上也有更多的验证规则可以使用.这都不是重点,重点是你可以轻松的定制自己的规则. 内置规则: required – Makes the element required. remote – Requests a resource to check the element for validity. minlength – Makes the element require a give
宅蓝三木
2018/02/07
2K0
使用jQuery Validation插件来验证表单
web前端之锋利的jQuery八:jQuery插件的使用(表单验证、表单提交)
插件也称扩展,是一种遵循一定规范的应用程序接口编写出来的程序。 1.jQuery表单验证插件-Validation: 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件-Validation,其拥有以下优点: 内置验证规则:拥有必填、数字、email、URL和信用卡号等19类内置验证规则。 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供自定义覆盖默认提示信息的功能 实时
Java帮帮
2018/03/16
6.7K0
Element Plus 表单验证详解
Element Plus 是基于 Vue 3 的一套组件库,它提供了许多组件帮助开发者快速构建现代 Web 应用。本文将详细介绍如何在 Element Plus 中进行表单验证,并通过具体示例解释每个部分的用法。
繁依Fanyi
2024/06/14
1.4K0
Element Plus 表单验证详解
Element Plus 是基于 Vue 3 的一套组件库,它提供了许多组件帮助开发者快速构建现代 Web 应用。本文将详细介绍如何在 Element Plus 中进行表单验证,并通过具体示例解释每个部分的用法。
繁依Fanyi
2024/08/02
5150
【转】jQuery验证控件jquery.validate.js使用说明+中文API
一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则 (1)required:true                必输字段 (2)remote:"check.php"      使用ajax方法调用check.php验证输入值 (3)email:
用户1696846
2018/07/16
4.8K0
angularjs 表单验证
一、常用的表单验证指令  1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3. 最大长度 验证表单输入的文本长度是否小于或等于某个最大值,在输入字段上使用指令ng-maxlength=
柴小智
2018/04/10
6.7K0
angularjs 表单验证
JQuery.validationEngine表单验证插件
JQuery.validationEngine表单验证控件功能强大,自带了样式显示模式:
全栈程序员站长
2022/11/15
1.9K0
JQuery.validationEngine表单验证插件
一款比较实用齐全的jQuery 表单验证插件
一款比较实用,并且验证类型齐全的jQuery表单验证插件.英文版原作者@Vanadium,由我做中文整理.E文水平有限,如果翻译的有问题的,请大家指出,在此感谢~ 可以验证哪些? 文字,日期,邮箱,
Java架构师必看
2021/03/22
8460
HTML5表单及其验证
将原本type为text的input控件声明为以上特殊类型,是为了给用户呈现不同的输入界面(移动平台上支持这些不同的输入界面,这里就不细说),而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素,请用支持这些表单元素的浏览器查看,IE对其支持最差。
HUC思梦
2020/09/03
1.8K0
JQuery表格表单操作
1、多选框应用代码示例 <form action=”#” method=”post”> 你喜欢的明星是?<br /> <input type=”checkbox” name=”boxs” value=”张嘉译” id=”1″ /><label for=”1″>张嘉译</label> <input type=”checkbox” name=”boxs” value=”周润发” id=”2″ /><label for=”2″>周润发</label> <input type=”checkbox” name=”bo
苦咖啡
2018/05/07
1.5K0
使用原生 JavaScript 手写一个高效的表单验证系统
我们将使用HTML、CSS和JavaScript来实现这个表单验证功能。首先,让我们看看HTML代码:
前端达人
2024/06/14
2540
使用原生 JavaScript 手写一个高效的表单验证系统
html中表单的校验的插件,jquery表单验证插件validationEngine「建议收藏」
对 validationEngine.jquery.css 文件进行修改,修改如下:
全栈程序员站长
2022/11/10
2.6K0
Flask框架(四)之表单验证
Flask的表单验证 wtforms 安装:pip3 install wtforms 使用1: from flask import Flask, render_template, request, redirect from wtforms import Form from wtforms.fields import simple from wtforms import validators from wtforms import widgets app = Flask(__name__, templat
GH
2020/03/19
8410
jQuery插件jQueryValidate
jQuery Validate是一个流行的jQuery表单验证插件,用于验证用户输入的表单数据。它提供了一组简单且强大的验证规则和选项,使开发人员能够轻松地实现客户端表单验证功能。
堕落飞鸟
2023/05/18
2.3K0
相关推荐
用jquery实现表单验证_jquery验证插件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验