Happy.js 轻量级 Web 表单验证插件
Happy.js 是一个轻量级的 jQuery 表单验证插件,默认只支持一些简单的输入框验证(必填、数据、数字、e-mail、最小/最大、和电话号码),但是简单增加一些行和正则,就能扩展。
特点
之所以比较喜欢 Happy.js,主要原因有两个:
轻量级
核心文件 Happy.js 总共也不到 200 行,而且可读性也较强,通过阅读核心文件,我们可以更加轻松的了解 Happy.js 的工作原理,从而更加灵活的使用 Happy.js。
注意:其他的插件功能如 Form Valiads 等插件,虽然功能很强大,但是,我们通常不大容易阅读完它的代码,掌握它的工作原理,最终只是沦为简单的插件使用者,这并不利于我们成长!
可拓展
虽然 Happy.js 轻量级,但是它却提供了很好的拓展性,将更多的功能的实现,依赖于开发者本身!
使用方法
1、自定义一个表单
<form id="awesomeForm" action="/lights/camera" method="post"><input id="yourName" type="text" name="name" />
<input id="email" type="text" name="email" />
</form>
2、引入插件文件
<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="happy.methods.js"></script>
<script type="text/javascript" src="happy.js"></script>
3、调用插件,添加验证代码
$('#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="email_unhappy" class="unhappyMessage">请输入你的 email </span>
参数和方法
ishappy()方法中,所传的参数是一个JSON对象,下面我们介绍一下该对象的顶级属性:
由于英文太过经典,这里就直接照搬下来了:
fields (object, see below)
The configs for each field with the jquery selector as the key.
大概意思就是说:fileds是一个json对象,对象中的key是以jquery的选择器字符串作为json对象的key,可以参考上面的例子
submitButton (string)
If you pass jQuery selector to this the form will be validated when that item is clicked instead of on submit.
大概意思是说:submitButton是一个jquery选择器的字符串,当单机这个按钮的时候,就会进行form表单的校验!
happy (function)
A callback that gets triggered when form submission is attempted and all fields pass validation.
大概意思是说:happy是一个函数,当form表单校验成功的时候,进行的回调函数
unHappy (function)
A callback that gets triggered when form submission is attempted but any fields fail validation.
大概意思是说:unHappy是一个函数,当form表单校验失败的时候进行的回调函数
errorTemplate (function)
Used to generate custom error html instead of the default. Is passed a standard error object as its only parameter (which has id and message attributes). Should return the error message html.
大概意思是说:errorTemplate是一个回调函数,使用一个自定义的html错误来代替默认的,
该函数只有一个参数,这个参数就是一个错误对象,返回的是错误的html信息!可以看上面的例子!
filed 对象
required (boolean or ‘sometimes’): You can specify that a field is required here, OR… better yet specify it with the HTML5 required attribute like so: <input type=”text” required>. Happy.js will detect that too, even in IE6. So either way is fine. Also, you can pass the string 'sometimes'
, to specify that you always want it to run the test
function to determine validity. Otherwise ‘Happy’ will only validate non-blank values. Passing 'sometimes'
lets you make fields conditionally required.
大概意思是说:required是一个布尔类型,true表示必填,false表示非必选!或者,我们也可以使用somtimes字段,表示非必选!
message (string)
Message shown in case of an error for this field.
大概意思:message是一个字符串,表单字段错误的话,就会显示这个字符串
test (function)
A function that takes the field value as the first argument and returns true or false.
大概意思:test是一个函数,我们可以使用test所指的函数对该字段的值进行校验,这个函数有两个参数,第一个参数,就是当前字段的值!第二字段是我们通过arg定义的值
无论required无论是是什么,只要定义了test,都会得到执行
arg (anything)
An optional second argument that will get passed to the test function. This is useful for comparing with another paramter or whatnot. If this is a function it will be evaluated. This way you can compare it to something that is evaluated at runtime such as what they put in another field or to make a server call to check if a username is available, etc.
大概意思:arg可以是任何一种类型,定义该参数后就会作为test函数的第二参数!可以看例子
trim (boolean, default: true): Password fields are not trimmed, but other field values are trimmed by default. Also, please note that if you pass a clean method it is assumed that you’ll handle any trimming, etc, so the value won’t be trimmed in that case.
大概意思:trim 是布尔类型,表示是否对字段进行 trim,true 表示确定过滤,false 表示不过滤,不过无论怎么设置都不会对 password 进行过滤!
相关链接
- 项目地址:http://projects.joreteg.com/Happy.js/
- Github 地址:http://github.com/henrikjoreteg/Happy.js
以上是 Happy.js 轻量级 Web 表单验证插件 的全部内容, 来源链接: utcz.com/p/232339.html