网络上有很多的表单验证插件,但是很多功能非常强悍,如果你只是需要一个最简洁的,那么 Happy.js 就是一个很好的选择。
Happy.js 是一个轻量级的 jQuery 表单验证插件,默认只支持一些简单的输入框验证(必填,数据,数字,e-mail,最小/最大,和电话号码),但是简单增加一些行和正则,就能扩展。
第一步:定义表单:
<form id="awesomeForm" action="/lights/camera" method="post">
<input id="yourName" type="text" name="name" />
<input id="email" type="text" name="email" />
</form>
第二步:定义验证模式
$('#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> 如:
<span id="textInput1_unhappy" class="unhappyMessage">请输入你的 email </span>
下载:Happy.js