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

2023-04-15 15:20:33 浏览数 (3)

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

Happy.js 介绍

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

Happy.js 使用

第一步:定义表单:

代码语言:javascript复制
<form id="awesomeForm" action="/lights/camera" method="post">
  <input id="yourName" type="text" name="name" />
  <input id="email" type="text" name="email" />
</form>

第二步:定义验证模式

代码语言:javascript复制
$('#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复制
<span id=​"textInput1_unhappy" class=​"unhappyMessage">请输入你的 email ​</span>

下载:Happy.js


1 人点赞