在對web開發(fā)的時候，經(jīng)常需要使用到form表單，自然也就少不了form表單的js校驗！這里，向大家推薦一個輕量級的form表單校驗插件，happy.js！
之所以比較喜歡happy.js，主要原因有兩個：
①輕量級，核心文件happy.js總共也不到200行，而且可讀性也較強(qiáng)，通過閱讀核心文件，我們可以更加輕松的了解happy.js的工作原理，從而更加靈活的使用happy.js！
注意：其他的插件功能如form valiads等插件，雖然功能很強(qiáng)大，但是，我們通常不大容易閱讀完它的代碼，掌握它的工作原理，最終只是淪為簡單的插件使用者，這并不利于我們成長！
②可拓展，雖然happy.js輕量級，但是它卻提供了很好的拓展性，將更多的功能的實現(xiàn)，依賴于開發(fā)者本身！
廢話不多說，這里就介紹一下happy.js的用法吧！
A、引入happy.js的核心文件
引入jquery.js，很多插件都是基于jquery的，畢竟這個插件太牛逼了！
引入happy.method.js文件
引入happy.js文件
<head> <script type="text/javascript" src="./test/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="happy.methods.js"></script> <script type="text/javascript" src="happy.js"></script> <script type="text/javascript" ></head>B、下面是html部分的代碼
<body><div> <h1>hppy js 學(xué)習(xí)</h1> <form type='post' id="checkform" method="post"> <p>姓 名：<input type="text" name="username"></p> <p>密 碼：<input type="password" name="password"></p> <p>密碼確認(rèn)：<input type="password" name="repassword"></p> <p>郵 箱: <input type="text" name="email"></p> <p>手機(jī)號碼: <input type="text" name="phone"></p> <p><input type="submit" value="提交"></p> </form></div></body>c、下面是我們程序員，需要寫的js代碼：
<script type='text/javascript' language='javascript'> $(document).ready(function(){ $('#checkform').isHappy({ fields:{ /*選中名字字段，設(shè)置校驗規(guī)則,以下同理*/ 'input[name="username"]':{ //是否是必填的 required:true, message:'請?zhí)顚懩拿郑?, //是否過濾 trim:true }, 'input[name="password"]':{ required:true, message:'請?zhí)顚懨艽a！', }, 'input[name="repassword"]':{ required:true, message:'兩次密碼輸入不一致！', arg:$('input[name="password"]').val(), test:function(repassword, password){ /*但是這里很奇怪，我們并沒有得到password的值， 這里只能再次獲得一次，這里奇怪，希望有明白的朋友提供寶貴意見*/ var password = $('input[name="password"]').val(); if(password != repassword) { return false; } else { return true; } } }, 'input[name="email"]':{ required:true, message:'請?zhí)顚懩泥]箱！', //這個是在happy.method.js中定義的，而我們直接使用function沒有什么區(qū)別 test:happy.email }, 'input[name="phone"]':{ required:true, message:'請?zhí)顚懩氖謾C(jī)號！', test:happy.USPhone } }, happy:function(){ //提交成功后的回調(diào)函數(shù) alert('submit success'); }, unHappy:function(){ //提交失敗后的回調(diào)函數(shù)， //alert('submit failed'); }, errorTemplate:function(error){ //error是一個json對象，他結(jié)果如下 /*{messge:'顯示的錯誤信息', id:當(dāng)前選擇器的第一個字符+'_unhappy'} */ return $('<span style="color:red;font-weight:bold" role="alert">' + error.message + '</span>'); } }) }) </script>d、ishappy方法中，所傳的參數(shù)是一個json對象！
下面我們介紹一下該對象的頂級屬性：
由于英文太過經(jīng)典，這里就直接照搬下來了：
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選擇器的字符串，當(dāng)單機(jī)這個按鈕的時候，就會進(jìn)行form表單的校驗！
happy (function): A callback that gets triggered when form submission is attempted and all fields pass validation.
大概意思是說：happy是一個函數(shù)，當(dāng)form表單校驗成功的時候，進(jìn)行的回調(diào)函數(shù)
unHappy (function): A callback that gets triggered when form submission is attempted but any fields fail validation.
大概意思是說：unHappy是一個函數(shù)，當(dāng)form表單校驗失敗的時候進(jìn)行的回調(diào)函數(shù)
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是一個回調(diào)函數(shù)，使用一個自定義的html錯誤來代替默認(rèn)的，
該函數(shù)只有一個參數(shù)，這個參數(shù)就是一個錯誤對象，返回的是錯誤的html信息！可以看上面的例子！
e、filed也是一個json對象
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是一個函數(shù)，我們可以使用test所指的函數(shù)對該字段的值進(jìn)行校驗，這個函數(shù)有兩個參數(shù)，第一個參數(shù)，就是當(dāng)前字段的值！第二字段是我們通過arg定義的值
無論required無論是是什么，只要定義了test，都會得到執(zhí)行
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可以是任何一種類型，定義該參數(shù)后就會作為test函數(shù)的第二參數(shù)！可以看例子
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是布爾類型，表示是否對字段進(jìn)行trim，true表示確定過濾，false表示不過濾！
不過無論怎么設(shè)置都不會對password進(jìn)行過濾！
由于水平有限，其中還有一些問題，希望提出寶貴的意見！
