上節課程我們講到：
>[info] iWebShop 系統默認提供了大量的優秀 JS 工具和插件，比如日歷，jquery，artDialog 彈出框 UI，artTemplate模板引擎等等…所有系統內置的 JS 都在\lib\web\js\jspackage_class.php 有興趣的用戶可以自己擴展一些常用工具，在模板里面引用更為簡單。
這次課程我就說明一下有哪些常用的JS工具，由于每一個JS工具的用法都能寫一本幫助文檔，所以這里只介紹JS工具的功能及用法
## 一、iWebShop使用了哪些JS工具
打開\lib\web\js\jspackage_class.php 文件，文件開頭就是以下代碼：
~~~
//系統JS注冊表
private static $JSPackages = array(
'jquery' => array(
'js' => array(
'jquery/jquery-1.11.3.min.js',
'jquery/jquery-migrate-1.2.1.min.js'
)
),
'form' => array('js' => 'form/form.js'),
'dialog' => array(
'js' => array(
'artdialog/artDialog.js',
'artdialog/plugins/iframeTools.js'
),
'css' => 'artdialog/skins/aero.css'
),
'kindeditor' => array(
'js' => array(
'editor/kindeditor-min.js',
'editor/lang/zh_CN.js'
),
'callback' => 'initKindEditior'
),
'validate' => array(
'js'=>'autovalidate/validate.js',
'css'=>'autovalidate/style.css'
),
'my97date' => array('js' => 'my97date/wdatepicker.js'),
'artTemplate' => array(
'js' => array(
'artTemplate/artTemplate.js',
'artTemplate/artTemplate-plugin.js'
)
),
'cookie' => array('js' => 'cookie/jquery.cookie.js'),
'admanage' => array('js' => 'admanage/adloader.js'),
'chart' => array('js' => 'highcharts/highcharts.js'),
);
~~~
每一種JS工具的源碼放在?\lib\web\js\source下面。如果要做擴展，就修改jspackage_class.php，在source下增加相應的JS文件，就可以調用了。
## 二、JS工具介紹
**adloader.js**
iwebshop自己開發的廣告加載器，60行的代碼，很簡潔。要使用廣告的頁面記得要引入這個js文件，廣告的設置在管理員后臺
**autovalidate**
iWebShop開發的表單驗證插件。
**form.js**
這個也是iWebShop自己開發的插件，主要完成表單回寫的功能，在表單初始化時用比較多。
**jquery**
目前應用最廣的JS庫，好多第三方的工具都是基于jqurey開發的。
**artdialog**
對話框組件,詳細用法可看：[http://lab.seaning.com/](http://lab.seaning.com/)
**artTemplate**
性能很好的javascript 模板引擎?[https://github.com/aui/artTemplate](https://github.com/aui/artTemplate)
**jquery.cookie**
對cookie進行操作的工具：[https://github.com/carhartl/jquery-cookie](https://github.com/carhartl/jquery-cookie)
**kindeditor**
一個富文件框的編輯器：[http://kindeditor.net/doc.php](http://kindeditor.net/doc.php)
**highcharts**
一個圖表工具：[http://www.hcharts.cn/](http://www.hcharts.cn/)
**my97date**
日期控件：[http://www.my97.net/](http://www.my97.net/)
## 三、validate.js，form.js的使用
這兩個js文件是為iWebShop量身定做的，下面就通過官方提供的例子說明這兩個js的使用方法。
### validate.js
首先要通過 js 標簽引入此插件：{js:validate}
form 表單中的 input 標簽中 type 為 text,password,select-one,textarea 中添屬性pattern 和 alt 屬性系統將會自動添加驗證功能
如：對 email 的驗證，在視圖文件里編寫如下代碼：
~~~
{js:validate}
<form>
<input name='email' pattern='email' alt='請輸入正確的 email'>
</form>
~~~
運行效果如下：
當你輸入不正確的格式時，效果如下圖所示:
當你輸入正確的格式時，如下圖所示:
對于 pattern 的正則系統對常用的正則都作了一些封裝如： required， email， qq ， id， ip ， zip， phone， mobi ，url ，date，datetime ，int ，float 等等，
如果以上還沒能滿足你的要求，則用戶可以自己寫正則,如我想讓用戶輸入一個 3-5 位的數字：則修改代碼
~~~
<input name='email' pattern='^\d{3,5}' alt='請輸入一個 3-5 位的數字'>
~~~
運行效果:
填寫正確:
另外要注意，要驗證時，隱藏輸入項目會失效，不進行驗證處理！
就是這么簡單，那么用戶如果想在驗證完后再運行自己的 js 函數怎么辦？
修改 文件
~~~
{ js:validate}
<form callback='test("回調一下")'>
<input name='email' pattern='^\d{3,5}' alt='請輸入一個 3-5 位的數字'>
<input type='submit'/>
</form>
<script>
function test(txt)
{
alert(txt);
return false;
}
</script>
~~~
然后點擊提交按鈕:
>[info] 這里要解釋一下回調函數的 return true 和 false
> 如果返回的是 true,表單通過驗證后，表單將提交，不通過將不提交。
> 如果返回的是 false，則無論表單是否通過表單都將不會被提交。
下面再說一下 form.js 文件，這個主要是完成表單回寫功能的，比方說，你想讓表單里的項目初始化一些值
修改文件：
~~~
{ js:form}
<form name='test'>
<input name='email' ></br>
<input type="radio" name="sex" value='1'>男<input type="radio" name="sex"
value='0'>女</br>
<input type="checkbox" name="live" value='a'>看書<input type="checkbox"
name="live" value='b'>打球</br>
<select name="code">
<option value="c++">c++</option>
<option value="java">java</option>
<option value="php">php</option>
</select>
<input type='submit'/>
</form>
<script>
var form = new Form('test');
form.init({'email':'a@a.com','sex':'1','live':'a;b','code':'php'});
</script>
~~~
運行效果如下：
同樣也可以用 getItems 取得表單里所有數據的對象。也可以用 setValue(name,value)
的方式只給一個設置對應的值，也可以通過 getValue(name)得到對應項的值。
要注意的兩點：
1、多選的時候是用 ; 號來分開的。
2、此 form 插件不能對 file 字段進行處理。
>[warning]如有不明白的地方，留言或是加入我們?“三眾技術QQ交流群”一起討論
## 關于我們
>[danger][三眾科技](http://www.sunzoon.com)資訊平臺——大道至簡，悅你所閱！
>本教程由[三眾簡悅](http://it.sunzoon.com)原創，轉載請注明出處，作者：bobball，由bobo整理成看云書籍
三眾技術交流群：**543102562**
歡迎大家加入我們，共同討論IT，互聯網技術。同時可以掃描下面的二維碼關注我們，謝謝！
