退出系统
2.0 版本 weex 版本
快速开始
更新日志
快速部署框架
组件调用说明
代码块功能
data 重要说明
APP端关闭回弹
视频教程
组件库 ( 40个 )
01. 头部信息组件
02. Flex布局 + 通用样式
03. 常用文本
04. 滚动区域
05. 可移动区域
06. 徽章组件
07. 滚动公告
08. 通用列表
09. 图文列表
10. 新闻列表
11. 卡片视图
12. 多格图标
13. 局部选项卡
14. 全屏选项卡
15. 星级图标
16. 折叠面板
17. 按钮组件
18. Loading 组件
19. 全屏 Loading
20. 标题、更多、换一批
21. 横向公告
22. 底部导航
23. 表单组件
24. 数字输入框
25. 可选标签
26. 弹出层
27. 图标
28. 步骤
29. 倒计时(step)
30. 轮播组件
31. 滑动操作
32. 日历组件
33. 区间滑块
34. 顶部提示
35. 进度条、圆环进度条
36. 弹出式菜单
37. 多功能菜单
38. 数字键盘
39. 富文本加强
40. 浮层引导
界面库 ( 27个 )
01. 评论界面
02. 搜索界面
03. 登录、注册
04. 城市选择
05. echarts 【第三方】
06. 图片选择及预览
07. 设置界面
08. 下拉刷新
09. 上拉加载
10. 普通表格
11. 数据表格
12. 时间轴
13. 商品分类展示
14. 购物车
15. 条件筛选
16. 瀑布流
17. 图片剪裁
18. 商品详情 + 属性选择
19. 图片懒加载
20. 地区联动
21. IM 即时通讯
22. 骨架屏
23. 分段切换
24. 抽奖活动
25. 问卷界面
26. 地址管理界面
27. 身份证上传
表单、验证
1. 表单组件
2. 表单、数据验证
css 动画
animate.css 动画库
js 工具库
常用工具库介绍
日期时间转换
网络请求工具
随机数及字符
MD5 转换
app版本检查及更新

GraceUI - 表单验证

graceUi.png
引用graceChecker

var graceChecker = require("../../graceUI/graceChecker.js");

验证步骤

1、定义验证规则
var rule = [
    {name:"数据键名称", checkType: "验证类型", checkRule: "验证规则", errorMsg: "错误提示信息" },
    ......
];
如
var rule = [
    { name: "nickname", checkType: "string", checkRule: "1,3", errorMsg: "姓名应为1-3个字符" },
    { name: "gender", checkType: "in", checkRule: "男,女", errorMsg: "请选择性别" },
      { name: "bd", checkType: "notsame", checkRule: "请选择", errorMsg: "请选择生日" },
      { name: "aihao", checkType: "notnull", checkRule: "", errorMsg: "请选择爱好" },
      { name: "email", checkType: "email", checkRule: "", errorMsg: "请填写您的邮箱" }
];

验证类型及规则

1. string
功能 : 字符串及长度检查
规则 : 最小长度,最大长度 如 1,3 或 2, 2,代表只检查最短

2. int
功能 : 整数及长度检查
规则 : 最小长度,最大长度 如 1,3

3. between
功能 : 数值区间检查
规则 : 最小值,最大值 如 1,3 或 2.5,1000

4. betweenD
功能 : 数值区间检查【整数】
规则 : 最小值,最大值 如 1,3 或 2,1000

5. same
功能 : 等值检查
规则 : 对应的值

6. notsame
功能 : 不等值检查
规则 : 对应的值

7. email
功能 : 邮箱检查
规则 : 无需设置

8. phoneno
功能 : 11位手机号检查
规则 : 无需设置

9. zipcode
功能 : 6位邮编检查
规则 : 无需设置

10. reg
功能 : 正则表达式检查
规则 : 正则表达式内容 如 "^[0-9]{1,2}$"

11. in
功能 : 包含某个字符串的检查
规则 : 字符串集,如:"北京,上海"

12. notnull
功能 : 不为空检查【null 或者 空数组】
规则 : 无需设置

说明:
只要符合对象形式的数据都可以被检查,表单数据在提交时会自动被封装为对象,所以验证更为遍历!
验证语法及返回值

var checkRes = graceChecker.check(被验证的数据, 验证规则);
//验证通过返回true 失败返回 false 并使用 graceChecker.error 属性记录对应的验证错误

完整演示

uni-app 代码
微信小程序代码
请点击左侧按钮切换对应的手册内容