nd-form
集成了 nd-formdata 与 nd-queue 的表单。
安装
$ npm install nd-form --save -r https://registry.npm.taobao.org
命令说明
1 执行测试用例
npm test
2 生成使用文档
npm run doc
3 打包 JS 文件
npm run pack
目录说明
ND-FORM
├─config ------ karma,webpack, doc 的配置文件
├─coverage ---- 运行 npm test 命令后生成的测试覆盖率报告
├─src --------- handlebars 的模板
├─tests ------- 单元测试
├─docs -------- 运行 npm run doc 后生成的说明文档
├─dist -------- 运行 npm run pack 打包好的可部署文件
└─index.js ---- 组件主源码
依赖技术
- webpack 组件的打包工具
- karma JavaScript 测试管理工具(Test Runner)
- phantomjs 基于 WebKit 的服务器端的浏览
- mocha JS的测试框架
- isparta 代码测试覆盖工具
- eslint 编码规范检查,有效控制代码质量
- handlebars js的模板引擎
使用
var Form = ;var Validator = ;var md5s = ; // use Form className: 'ui-form-login' // 更多 plugins,见 nd-form-extra plugins: Validator fields: icon: 'user-o' name: 'login_name' attrs: placeholder: '帐号' maxlength: 41 required: 'required' pattern: '^[_0-9a-zA-Z]{1,20}@[_0-9a-zA-Z]{1,20}$' 'data-display': '帐号' messages: pattern: '格式:用户@组织' icon: 'lock-o' name: 'password' type: 'password' attrs: placeholder: '密码' maxlength: 32 required: 'required' 'data-display': '密码' // 配置按钮 buttons: label: '登录' type: 'submit' role: 'form-submit' // 处理 attrs.formData { // do something return data; } // 处理待提交到服务端的数据 { // 对密码进行加密 var salt = '<salt>'; datapassword = ; return data; } // 绑定一些事件,继承自 widget events: { util ; } { util ; } parentNode: '#main'// 登录按钮的事件回调;