上节课程我们讲到：
>[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，互联网技术。同时可以扫描下面的二维码关注我们，谢谢！
