项目演化系列--验证体系(基于angular的前端验证)
前言
之前分享的《web项目演化--验证体系》中提到基于angular的验证,但是为了以防读者迷惑,能够好的理解验证体系,所以没有详细介绍。
今天特地补写一篇关于构建angular的验证。
前端验证组件虽然对于美工的要求会更多,但是真实的应用环境下,其实对业务的要求会更高,需要组件有统一的规范,除非设计通用组件,否则应该更关注业务来进行设计。
有了统一的验证组件,复合组件可以重用单一的文本框、输入框、复选框等组件,开发人员可以节省不少时间,并且在后期需要对网站风格统一调整的时候,只需要改变相应的组件即可完成变更。
实现
首先需要定义一个验证的规则,需要包含验证的方式、验证参数,比如:['stringLength', { min: 1, max: 6 }],这是我当前使用的验证体系的规则,由于anuglar的便利性,我们可以直接使用一个属性来存储该值。
有了规则,就需要一个验证的类来验证以上定义的规则,大致代码如下:
demo.factory('$validator', [
function () {
return {
stringLength: function (opts, value, callback) {
if (typeof value !== 'string' && value != null)
value = value.toString(); var min = opts.min || 0;
var max = opts.max || 0;
callback(value ? (max == 0 ? value.length >= min : value.length >= min && value.length <= max) : min === 0);
}
};
}
]);
验证方法中之所以使用异步回掉方式,是为ajax验证方式预留的。
有了验证类,只要在组件中进行相应的引用,然后获取存有验证规则的属性,并用验证类进行验证即可,代码如下:
demo.directive('ucInput', [
'$validator',
function ($validator) {
return {
replace: true,
scope: {
data: '='
},
template: '<input ng-style="{ \'background-color\': isValid && \'white\' || \'red\' }" type="text" ng-model="data" />',
link: function (scope, el, attrs) {
scope.isValid = true; var validType = scope.$parent.$eval(attrs.validType);
el.bind('blur', function () {
var fn = function () {
scope.isValid = $validator[validType[0]](validType[1], scope.data);
};
var phase = scope.$root.$$phase;
if (phase == '$apply' || phase == '$digest') {
if (fn && (typeof (fn) === 'function'))
fn();
}
else {
scope.$apply(fn);
}
});
}
};
}
]);
组件的效果比较丑,别在意细节(^_^),当用户焦点离开组件的时候,组件就会进行验证,因此该组件就需要用户的主动操作才能有效果了。
然而如果用户不操作组件,直接点击提交按钮那该怎么办呢?
于是乎就需要一个容器指令,来包裹所有的验证组件,并在触发提交按钮的时候,也可以让包含在内的所有验证组件自己触发验证。
我们不可能在每一个验证组件中都写一堆相似的验证代码来实现验证,而且业务中,如果组件移除或者隐藏都应该将组件排除到验证列表外,因此就需要一个额外的类来承担这个责任,代码如下:
demo.directive('ucForm', [
function () {
return {
require: 'ucForm',
controller: [
function () {
this.controls = [];
}
],
link: function (scope, _, attrs, formCtrl) {
scope.onSubmit = function (callback) {
var ep = new EventProxy();
ep.after('valid', formCtrl.controls.length, function (res) {
var b = true;
for (var i = 0; i < res.length; i++) {
b = res[i];
if (!b)
break;
}
if (b)
callback();
}); for (var i = 0; i < formCtrl.controls.length; i++) {
formCtrl.controls[i].valid(function (b) {
ep.emit('valid', b);
});
}
};
}
};
}
]); demo.factory('$valid-ui', [
'$validator',
function ($validator) {
function Control(validType, property) {
this.validType = validType;
this.disable = false;
this.isValid = true;
this.property = property;
this.value = '';
} Control.prototype.valid = function (callback) {
this.isValid = true;
if (this.disable && callback)
return callback(true); var self = this;
$validator[this.validType[0]](this.validType[1], self.value, function (b) {
if (callback)
callback(b); self.isValid = b;
});
}; return {
create: function (validType, property) {
return new Control(validType, property);
}
};
}
]);
有了以上的支持,接下来只需要修改一个ucInput,并且将ucForm.onSubmit绑定到提交按钮上便可以实现一键验证的效果了,具体的实现代码这里就不提供了。
结束语
那么基于angular的验证到这里就基本实现了,其他的扩展,例如:点击提交按钮的时候可以跳转到第一个错误组件的地方,只需要组件中通过获取组件坐标并滚动到相应的位置即可实现。
至于美观方面,就得看美工了,文章就到这里了,如果有错误或者问题的话,请大家留言,谢谢。
项目演化系列--验证体系(基于angular的前端验证)的更多相关文章
- Forms身份验证和基于Role的权限验证
Forms身份验证和基于Role的权限验证 从Membership到SimpleMembership再到ASP.NET Identity,ASP.NET每一次更换身份验证的组件,都让我更失望.Memb ...
- ASP.NET:Forms身份验证和基于Role的权限验证
从Membership到SimpleMembership再到ASP.NET Identity,ASP.NET每一次更换身份验证的组件,都让我更失望.Membership的唯一作用就是你可以参考它的实现 ...
- 基于Abp React前端的项目建立与运行——React框架分析
基于Abp React前端的项目建立与运行 目录 基于Abp React前端的项目建立与运行 1 Abp项目配置 2 运行WebApi后端项目 2.1 创建C3D数据库,并且将数据库对应链接字符串替换 ...
- 我是如何基于angular+requirejs+node做SPA项目架构的
本文章已经录制视频,地址是:http://v.youku.com/v_show/id_XODI3MjYyODI0.html 前端这两年技术飞速发展,各种优秀框架层出不穷.本文不是讨论各框架的比较,也不 ...
- 基于 Token 的身份验证:JSON Web Token(附:Node.js 项目)
最近了解下基于 Token 的身份验证,跟大伙分享下.很多大型网站也都在用,比如 Facebook,Twitter,Google+,Github 等等,比起传统的身份验证方法,Token 扩展性更强, ...
- ABP教程-打造一个《电话簿项目》-目录-MPA版本-基于ABP1.13版本
此系列文章会进行不定期的更新,应该会有6章左右. 感兴趣的朋友可以跟着看看,本教程适合已经看过ABP的文档但是又无从下手的小伙伴们. 初衷: 发布系列教程的原因是发现ABP在园子火了很久,但是发现还是 ...
- ABP(现代ASP.NET样板开发框架)系列之18、ABP应用层——权限验证
点这里进入ABP系列文章总目录 ABP(现代ASP.NET样板开发框架)系列之18.ABP应用层——权限验证 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目 ...
- ASP.NET MVC基于标注特性的Model验证:一个Model,多种验证规则
原文:ASP.NET MVC基于标注特性的Model验证:一个Model,多种验证规则 对于Model验证,理想的设计应该是场景驱动的,而不是Model(类型)驱动的,也就是对于同一个Model对象, ...
- DroidParts 中文系列教程(基于官方教程)
DroidParts中文系列教程(基于官方教程) (一)DroidParts框架概况 2014年4月18日星期五 11:36 他是一个精心构造的安卓框架,包括下面这些基本功能 DI依赖注入,可以注入V ...
随机推荐
- HTML5实战与剖析之原生拖拽(四可拖动dragable属性和其他成员)
可拖动dragable属性 之前我们已经为大家介绍过几篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些小东东,闲话不多说赶快一起看看吧. 在默认情况下,链接.文本和图像 ...
- duilib进阶教程 -- 设置资源路径 (15)
在前面的教程里,虽然图片都放到了skin文件夹里,但是XML却都在外面,当XML比较多时,就不太好看啦,如下图: 所以需要整理一下,将XML也放入skin文件夹,这样exe的目录就简洁多了: 将XML ...
- paip.powerdesign cdm pdm文件 代码生成器 java web 页面 实现
paip.powerdesign cdm pdm文件 代码生成器 java web 页面 实现 准备从pd cdm生成java web 页面...但是,ms无直接地生成软件.... 只好自己解析cdm ...
- paip.java 开发中web server的选择jboss resin tomcat比较..
paip.java 开发中web server的选择jboss resin tomcat比较.. 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专 ...
- Leetcode 283 Move Zeroes 字符串
class Solution { public: void moveZeroes(vector<int>& nums) { ; ; i< nums.size(); ++i){ ...
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- (转)数据库获得当前时间getdate()
CONVERT(nvarchar(10),count_time,121): CONVERT为日期转换函数,一般就是在时间类型 (datetime,smalldatetime)与字符串类型(nchar, ...
- linux平台下防火墙iptables原理(转)
原文地址:http://www.cnblogs.com/ggjucheng/archive/2012/08/19/2646466.html iptables简介 netfilter/iptables( ...
- 尝试制作了一个Panorama
照片拍的不太好, 效果如下(浏览器需要支持WebGL), 您可以用鼠标拖动浏览: //
- 【转载】酷酷的CSS3三角形运用
转载:http://www.cnblogs.com/keepfool/p/5616326.html 概述 在早期的前端Web设计开发年代,完成一些页面元素时,我们必须要有专业的PS美工爸爸,由PS美工 ...