MINIUI的使用以及一些常用小知识（前端）

MINIUI

• • MINIUI的使用
  • input输入框样式类
  • 输入内容限制、验证
  • 表单操作

MINIUI的使用

1. 在miniui的官网下载资源包
2. 用编辑器打开下载好的文件，打开WebContent文件夹下的demo文件夹可以查阅
3. js中要有mini.parse() 否则他不是miniui的控件，就用不了miniui中的方法
   详情请查看miniui官网api手册
4. miniui的官网还有一些demo在线就可以查看，并且还有源码方便查阅

input输入框样式类

1. class=“mini-textbox” //普通输入框
2. class=“mini-password” //密码输入框
3. class=“mini-textarea” //文本输入框
4. lass=“mini-datepicker” //日期选择（value=“2010-10-12”）
5. class=“mini-spinner” //数字框（value=“22” minValue=“10” maxValue=“50”）
6. class=“mini-timespinner” //时间微调（format=“H:mm”）
7. class=“mini-checkbox” //选择框（value=“Y” trueValue=“Y” falseValue=“N”）
8. class=“mini-combobox” //下拉选择框（showNullItem=“true” url="…/data/countrys.txt" textField=“text” valueField=“id” value=“cn”）
9. class=“mini-treeselect” //树选择框（url="…/data/listTree.txt" multiSelect=“true” textField=“text” valueField=“id” parentField=“pid” checkRecursive=“true” value=“ajax”）
10. class=“mini-checkboxlist” //复选框（repeatItems=“3” repeatLayout=“flow” url="…/data/countrys.txt" value=“cn,de,usa” textField=“text” valueField=“id”）
11. class=“mini-radiobuttonlist” //单选框（value=“en” repeatItems=“4” repeatDirection=“vertical” repeatLayout=“table” url="…/data/countrys.txt" textField=“text” valueField=“id”）
12. class=“mini-listbox” //展开的选择框（url="…/data/countrys.txt" value=“fr” textField=“text” valueField=“id” style=“height:120px;”）

输入内容限制、验证

miniui官方校验实例：

1. required=“true” //不允许为空
2. requiredErrorText=“帐号不能为空”
3. minLengthErrorText=“密码不能少于5个字符”
4. onvalidation=“onUserNameValidation” //输入框验证，添加事件function onUserNameValidation(e){}，输入后自动出发
5. vtype=“email” //必须是邮箱地址
6. vtype=“url” //必须是URL
7. vtype=“int” //必须是整数(int)
8. vtype=“float” //必须是数字(float)
9. vtype=“maxLength:6” //字符串长度（<= 6）
10. vtype=“minLength:2” //字符串长度（>= 2）
11. vtype=“rangeLength:2,6” //字符串长度（2-6）
12. vtype=“rangeChar:2,6” //字符数个数（2-6）
13. vtype=“range:0,100” //数字范围（0-100）
14. vtype=“date:yyyy-MM-dd” //必须是日期格式（如yyyy-MM-dd）
15. vtype=“date:MM/dd/yyyy” //必须是日期格式（如MM/dd/yyyy）
16. vtype=“email;rangeLength:5,20;” //邮箱格式，5~20个字符（组合）
17. onvalidation=“onEnglishValidation” //必须输入英文（自定义）
18. vtype=“english” //必须输入英文（自定义vtype）
19. onvalidation=“onEnglishAndNumberValidation” //必须输入英文+数字（自定义）
20. onvalidation=“onChineseValidation” //必须输入中文（自定义）
21. onvalidation=“onIDCardsValidation” //身份证验证15~18位（自定义）

表单操作

class="mini-datagrid"if (form.isValid() == false) return;var form = new mini.Form("#form1");var data = form.getData();      //获取表单多个控件的数据form.setData(data);    //设置控件数据form.unmask();form.clear();    //清除表单form.reset();    //重置表单