Happy.js 轻量级 Web 表单验证插件

Question

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