jsViews validates(验证)
概述:jsViews使得前端开发过程将js代码与html分离,通过模板实现数据与html元素关联,通过绑定方法用数据填充模板,达到渲染html要素的目的。采用该方法后js文件中再也不会出现动态创建html标签的代码,而导致修改页面元素时必须修改js代码的问题,关于jsViews的具体内容可参考其官网http://www.jsviews.com/,本文仅涉及前端页面通过jsViews进行验证时的操作。
jsViews验证包含两种情况——简单情况和自定义扩展,对于简单的验证如输入字符长度、必填字段等,可直接在模板文件中添加{^{validate}}{{/validate}}标签实现,如:
|
<div class="form-group"> <label class=" control-label col-sm-4">单位名称</label> <div class="col-sm-8"> <input type="text" class="form-control" data-link="{validate ORGNAME minLength=2 msg_minLength='单位名称不能少于%cond%字符' }" /> </div> </div> |
当然简单的配置属性不能完全满足具体开发过程中的复杂情况,此时,jsviews提供了接口允许开发者对验证的规则进行扩展,扩展的规则中可调用自己编写的验证函数,完成扩展后便可直接在模板文件中像引用其它验证标签一样直接引用扩展的标签,模板绑定后会自动调用自定义的验证标签完成验证。下面请看如何对验证规则进行扩展。
|
/* * 为jsviews添加额外的验证规则 */ // Register additional validators for orgcode $.views.tags.validate.validators({ //格式验证 regex_orgcode: { message: "请输入符合要求的组织结构代码", test: function (condition, val) { var reg = new RegExp("^(([0-9]{8}\-[A-Z0-9]{1})|([A-Z0-9]{2}[0-9]{6}[A-Z0-9]{10}))$"); return !reg.test(val); } }, //唯一性验证 unique: { message: "您输入的组织结构代码已存在", test: function (condition, val) { var res = model.customer.org_code_unique(val); return res; } } }); |
在模板文件中引用自定义标签
|
<div class="form-group"> <label class=" control-label col-sm-4">组织机构代码</label> <div class="col-sm-8"> {^{validate ORGCODE required=true msg_required='请输入组织结构代码' regex_orgcode=true unique=true }} <input type="text" class="form-control" data-link="ORGCODE" /> {{/validate}} </div> </div> |
至此,如何用jsViews进行验证已经结束。
jsViews validates(验证)的更多相关文章
- Ruby on Rails 的模型 validates 验证
validate(), 这个方法在每次保存数据时都会被调用.如:def validate if name.blank? && email.blank? errors.add_to_b ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉
前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自 ...
- 微信小程序开发06-一个业务页面的完成
前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
- rails 常用的验证方法 validates (转)
Agile Web Development with Rails 17.4 validation validate 在save的时候激活validate_on_create ...
- Yii2 rules验证规则
Rules验证规则: required : 必须值验证属性||CRequiredValidator 的别名, 确保了特性不为空. [['字段名1','字段名2'],required] //字段 ...
- ruby on rails validates uniqueness
最近在处理一个小功能,每个元素可以有多个图片,每个图片的name表示了它是背景图还是海报图, 需要对每个元素的图片name做一个唯一性验证,一个元素不能添加两个海报图, 需要使用的是validates ...
- [ruby on rails] 跟我学之(10)数据输入验证
这里简单加上几个验证,非空,最小长度,唯一 修改模型 修改app/models/post.rb文件,如下: class Post < ActiveRecord::Base #attr_acces ...
- 【ASP.NET Web API教程】6.4 模型验证
本文是Web API系列教程的第6.4小节 6.4 Model Validation 6.4 模型验证 摘自:http://www.asp.net/web-api/overview/formats-a ...
随机推荐
- python各种类型转换-int,str,char,float,ord,hex,oct等
int(x [,base ]) 将x转换为一个整数 long(x [,base ]) 将x转换为一个长整数 float(x ) 将x转换到 ...
- [图解教程]Eclipse不可不知的用法之一:自动生成Getter、Setter和构造方法
[图解教程]Eclipse不可不知的用法之一:自动生成Getter.Setter和构造方法 关键词:Getters and Setters.getter和setter方法.Constructor us ...
- WP布局之Pivot和Panorama
一.Pivot控件(枢轴控件) Pivot主要用于管理应用中的视图或者页面,此控件在WP中几乎处处可见,不管是短信的左右滑动,还是QQ的左右滑动都是此控件的功劳. 就是图片中的控件,是不是很熟悉呢. ...
- Java API —— DateFormat类
1.DateFormat类概述 DateFormat 是日期/时间格式化子类的抽象类,它以与语言无关的方式格式化并解析日期或时间. 是抽象类,所以使用其子类SimpleDateForm ...
- taglist
http://blog.csdn.net/duguteng/article/details/7412652 这两天看到网上有将vim 改造成功能强大的IDE的blog,突然心血来潮,亲身经历了一下. ...
- PHP输出缓冲控制- Output Control 函数应用详解
说到输出缓冲,首先要说的是一个叫做缓冲器(buffer)的东西.举个简单的例子说明他的作用:我们在编辑一篇文档时,在我们没有保存之前,系统是不会向磁盘写入的,而是写到buffer中,当buffer写满 ...
- ios进度条Demo一个
一个很简单的Dmo.就拿出来分享一下. 一个简单的阴影效果 _progressView.frame = CGRectMake(size.width * progress-size.width, H_H ...
- Jeally Bean中MonekyRunner 帮助文件
基于4.2的SDK导出来的MonkeyRunner的最新帮助,这个版本对MonkeyView和MonkeyRect有了很大的加强,在MonkeyRunner的易用性上有了很大的提高. 对于导出Monk ...
- 结构体mem_pool_t
/** Memory area header */ typedef struct mem_area_struct mem_area_t; /** Memory pool */ typedef stru ...
- Qt之QTableView添加复选框(QAbstractItemDelegate)
简述 上节分享了使用自定义模型QAbstractTableModel来实现复选框.下面我们来介绍另外一种方式: 自定义委托-QAbstractItemDelegate. 简述 效果 QAbstract ...