OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

可视化Web报表OnceVI中用户输入表单验证与提交


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1490274717879
注意 转载须保留原文链接,译文链接,作者译者等信息。  

在上一节中,我们用 OnceVI 制作了一张可录入信息的登录表单

本节主要介绍在表单提交过程中,应用Filter工具箱实现表单提交前的校验和数据提交后的处理。

表单处理函数

以上节内容为基础,本节主要介绍表单提交过程中,应用Filter工具箱实现表单内容验证与返回。并以app.validate和app.handle两个函数为例,展示表单与后台服务器信息交互过程。

app.validate: 在表单提交前对用户输入合法性做校验,返回错误信息则表示不合法 
app.handle: 在表单提交后,对服务返回的信息做响应

服务器处理时间序列如下图所示:

logic diagram

表单内容由前台传递(post)到服务器是,用app.validate检验传输内容有效性,Server接收到信息,并将保存信息与输入信息进行比较,比较结果通过app.handle函数重新返回给用户。


在上节登录界面基础上添加邮箱部分,并通过Data Binding将用户名,密码,和邮箱分别绑定Json 文件数据源中相应的对象,预览结果如下图。

demo temp


表单数据校验

为检验表单填写内容,保证后台服务器存储的是正确无误的信息,在Filter工具箱中添加app.validate函数,代码可见:

var email = function( value, element ) {
return /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/.test( value );
}

if (!userInfo.username) {
return 'Please fill in username'
}

if (userInfo.password.length<5) {
return 'Your password  is not right'
}

if (email(userInfo.email)){
return 'Your email is unvalid'
}

app.validate函数检验的内容包括:用户名是否填写,密码格式是否正确(长度大于5个字符),邮箱格式是否正确。定义email()函数为对邮箱格式正则检验,若email(value)中,value为邮箱格式,则返回true,否则返回false。

可在demo display页面输入表单信息,下图所示,为某次输入过程中密码格式错误的输出:

invalide output

如果需要添加其他信息的正则验证,可参考下列代码:

 // http://jqueryvalidation.org/url-method/
var url = function( value, element ) {
return /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?! (?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)* (?:\.(?:[a-z\u00a1-\uffff]{2,})).?)(?::\d{2,5})?(?:[/?#]\S*)?$/i.test( value );
}
/* date verfication*/
var date = function( value, element ) {
return !/Invalid|NaN/.test( new Date( value ).toString() );
}
/* dateISO verfication*/
var dateISO = function( value, element ) {
return /^\d{4}[\/\-](0?[1-9]|1[012])[\/\-](0?[1-9]|[12][0-9]|3[01])$/.test( value );
}
/*pure number verfication*/
var number = function( value, element ) {
return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test( value );
}
/*digit verfication*/
var digits = function( value, element ) {
return /^\d+$/.test( value );
}

表单返回处理

表单信息录入后,需要保存在后端服务器中。在Filter中添加app.handle函数,可以获取后台信息状态反馈,代码如下。

app.handle = function(res_data) {
if (UserInfo.username == res_data.username) {
return 'User info saved successfully'
}
return 'Save failure'
}

UserInfo为前台输入的表单信息,res_data为服务器中存储的表单信息,如果两者内容相同(此处,仅以用户名相同为例解释),则返回用户信息成功保存信息,否则,返回存储失败。通常情况下,表单保存无误。

handle demo


Filter工具箱中全部内容可见下图:

Filter

本例地址:http://cn.oncedoc.com/oncevi.player/oncevi.player.html?file=demo/svgbinder/LoginTemplate_2.svg 
更多示例: http://cn.oncedoc.com/page/view/oncevi-demo

社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. Github Pages疑似被封: 再也不能用Pages搭建个人博客了
  2. JavaScript条形码生成和扫码识别(Barcode scan)开源库
  3. 关于华为优化30、40老员工的争议
  4. OnceVI前后端分离的数据可视化报表工具简介
  5. 2016 年崛起的 JS 项目
  6. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI
  7. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  8. Web报表OnceVI如何制作条形码与打印二维码(Barcode/Qrcode)
  9. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. Web报表OnceVI如何制作条形码与打印二维码(Barcode/Qrcode)
  2. 如何基于SVG矢量图制作一个可填写信息的可视化表单-OnceVI
  3. OnceVI报表制作入门—如何将用户的json数据可视化成名片展示
  4. OnceDB支持全文搜索和关系查询的Redis内存数据库:驱动安装及使用教程
  5. 在OnceIO(Node.JS)中用Redis储存Session
  6. OnceIO的模块拦截与注入:模板文件路由重定向与Model数据改写
  7. OnceIO模块开发:模块注册、模块路由、静态文件重定向以及如何开发与设计一个功能扩展模块
  8. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  9. NodeJS教程:基于OnceIO框架实现文件上传和验证
  10. 在Debian(Raspberry Pi)树莓派上安装NodeJS

 关键字 - JavaScript
  1. JavaScript中NaN的秘密
  2. decodeURIComponent有个BUG,当浏览器请求地址含%+数字时,会解析错误
  3. JavaScript也有getter/setter方法:ES5 Object对象的5个不为人知的特性
  4. JavaScript中splice与slice的区别、数组的复制以及在指定位置添加删除元素
  5. JavaScrip字符串模板表达式中的反引号怎么打?
  6. Node.JS更改Windows注册表regedit的几种方法
  7. AngularJS在大型单页面应用中的性能优化(二)
  8. WebPack:更优秀的模块依赖管理工具,及require.js的缺陷
  9. Debian下设置Linux Shell脚本开机自动启动Node.JS进程
  10. Node.JS通过原型和类继承EventEmitter,实现收发事件的几种方法

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号