概述: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. ScannerDemo------string int

    import java.util.Scanner;                                                /** *Scanner演示 */ public cl ...

  2. QTableWidget嵌入QpushButton后定位是哪一个QpushButton

    问题: 有时候会遇到这样的情况,在QTableWidget中我们需要嵌入一个QpushButton按钮,但是如何确定是哪个Button按下的呢? 解决: 一般地,一个按钮按下后会连接到一槽函数,那么在 ...

  3. SQL Server查询优化方法(查询速度慢的原因很多,常见如下几种) .

    今天看到一位博友的文章,觉得不错,转载一下,希望对大家有帮助,更多文章,请访问:http://blog.haoitsoft.com 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺 ...

  4. ViewPager介绍和使用说明

    1   ViewPager实现的功能 和实际运行的效果图示意 ViewPager类提供了多界面切换的新效果.新效果有如下特征: [1] 当前显示一组界面中的其中一个界面. [2] 当用户通过左右滑动界 ...

  5. 函数lock_rec_bitmap_reset

    /*********************************************************************//** Resets the record lock bi ...

  6. UVa 11361 (计数 递推) Investigating Div-Sum Property

    题意: 统计[a, b]中有多少个数字满足:自身是k的倍数,而且各个数字之和也是k的倍数. 分析: 详细分析见<训练之南>吧,=_=|| 书上提出了一个模板的概念,有了模板我们就可以分块计 ...

  7. asp.net 使用JQuery 调用Ashx 后面直接写方法名,通过反射找到对应的方法

    using System.Reflection; public class Industry_Manager : IHttpHandler { HttpRequest gRequest = null; ...

  8. 封装Log工具类

    public class LogUtil { public static final int VERBOSE = 1; public static final int DEBUG = 2; publi ...

  9. mk文件剖析

    一个Android.mk file用来向编译系统描述你的源代码.具体来说:该文件是GNU Makefile的一小部分,会被编译系统解析一次或多次.你可以在每一个Android.mk file中定义一个 ...

  10. LeetCode: Reverse Words in a String && Rotate Array

    Title: Given an input string, reverse the string word by word. For example,Given s = "the sky i ...