概述: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. Android:让EditText不自动获取焦点

    解决方法: 在EditText的父级控件中加入属性: android:focusable="true" android:focusableInTouchMode="tru ...

  2. GridView 和ListView中自适应高度

    android中GridView  和ListView放在scrollView中时会默认的只有一行高这时就要我们自己计算出它的高度啦 首先是listview的 //动态设置listview的高度 pu ...

  3. 利用 java.lang.Runtime.addShutdownHook() 钩子程序,保证java程序安全退出

    以前在开发时只知道依靠数据库事务来保证程序关闭时数据的完整性. 但有些时候一个业务上要求的原子操作,不一定只包括数据库,比如外部接口或者消息队列.此时数据库事务就无能为力了. 这时我们可以依靠java ...

  4. 数据库MySQL-Oracle-DB2-SQLServer分页查询

    1. MySQL分页查询 (1)关键字: LIMIT beginIndex, maxRow (2)示例: LIMIT子句可以用来限制由SELECT语句返回过来的数据数量,它有一个或两个参数. 如果给出 ...

  5. topcoder srm 610 div2 250

    第一次做tc 的比赛,一点也不懂,虽然题目做出来了, 但是,也没有在比赛的时候提交成功.. 还有,感谢一宁对tc使用的讲解.. 贴一下代码..... #include <cstring> ...

  6. 纯tarjan poj2186

    tarjan,叙叙旧咯 #include<cstdio>#define maxn 50005int e[maxn],ne[maxn],be[maxn],all;int DFN[maxn], ...

  7. EF DataBase First生成model的验证

    如何避免在EF自动生成的model中的DataAnnotation被覆盖掉 相信很多人刚接触EF+MVC的时候,DataBase First模式生成model类中加验证信息的时候,会在重新生成mode ...

  8. Content-Type

    HTTP Content-type .*( 二进制流,不知道下载文件类型) application/octet-stream .txt text/plain 没有csv这种类型

  9. RTP封装h264

    网络抽象层单元类型 (NALU): NALU头由一个字节组成,它的语法如下: +---------------+      |0|1|2|3|4|5|6|7|      +-+-+-+-+-+-+-+ ...

  10. TS 流解码过程

    TS 流解码过程: 1. 获取TS中的PAT 2. 获取TS中的PMT 3. 根据PMT可以知道当前网络中传输的视频(音频)类型(H264),相应的PID,PCR的PID等信息. 4. 设置demux ...