概述: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(验证)的更多相关文章

  1. Ruby on Rails 的模型 validates 验证

    validate(), 这个方法在每次保存数据时都会被调用.如:def validate if name.blank? && email.blank?  errors.add_to_b ...

  2. 【微信小程序项目实践总结】30分钟从陌生到熟悉

    前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05-日历组件的实现 4. 微信小程序开发04-打造自 ...

  3. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

  4. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  5. rails 常用的验证方法 validates (转)

    Agile Web Development with Rails 17.4 validation validate              在save的时候激活validate_on_create  ...

  6. Yii2 rules验证规则

    Rules验证规则:  required : 必须值验证属性||CRequiredValidator 的别名, 确保了特性不为空. [['字段名1','字段名2'],required]    //字段 ...

  7. ruby on rails validates uniqueness

    最近在处理一个小功能,每个元素可以有多个图片,每个图片的name表示了它是背景图还是海报图, 需要对每个元素的图片name做一个唯一性验证,一个元素不能添加两个海报图, 需要使用的是validates ...

  8. [ruby on rails] 跟我学之(10)数据输入验证

    这里简单加上几个验证,非空,最小长度,唯一 修改模型 修改app/models/post.rb文件,如下: class Post < ActiveRecord::Base #attr_acces ...

  9. 【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 ...

随机推荐

  1. NPOI技术,

    using(FileStream stream=new FileStream("C:\Users\XXXXXX\Desktop\1.xls",FileMode.Open))     ...

  2. 72. Edit Distance

    题目: Given two words word1 and word2, find the minimum number of steps required to convert word1 to w ...

  3. JS代码片段:一个日期离现在多久了

    var dateDiff = function(hisTime,nowTime){ if(!arguments.length) return ''; var arg = arguments, now ...

  4. [置顶] Android系统五大布局详解Layout

    我们知道Android系统应用程序一般是由多个Activity组成,而这些Activity以视图的形式展现在我们面前,视图都是由一个一个的组件构成的.组件就是我们常见的Button.TextEdit等 ...

  5. iOSbase64

    ios中使用BASE64进行加密和解密的方法也很简单,可以直接用google-toolbox-for-mac的GTMBase64.h来实现google-toolbox-for-mac的对应地址如下: ...

  6. HDU4888 Redraw Beautiful Drawings(2014 Multi-University Training Contest 3)

    Redraw Beautiful Drawings Time Limit: 3000/1500 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...

  7. 函数 xdes_get_descriptor_with_space_hdr

    获得区描述符 xdes entry 的offset /********************************************************************//** ...

  8. 结构体TABLE_share

    struct TABLE_share { static inline TABLE **next_ptr(TABLE *l) { return &l->share_next; } stat ...

  9. 类Item_field

    class Item_field :public Item_ident { protected: void set_field(Field *field); public: Field *field, ...

  10. 1493: [NOI2007]项链工厂

    线段树. 真还就是个线段树.. 除去操作1,2的话,线段树很容易就处理了,问题在于如何处理操作1和2.(这点没想到).. 我们用一个delta维护操作1,如果没有旋转就+k,不然就-k. 每次读入i和 ...