概述：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进行验证已经结束。