Angular自定义输入框验证插件：必填项与类型检查
31 浏览量
更新于2024-08-30
收藏 79KB PDF 举报
本文档主要介绍了如何在Angular应用中实现自定义输入框验证功能，结合了angular.js和jQuery技术。由于jQuery需在angular之前引入，该插件允许用户对表单中的输入字段进行实时验证，包括必填项、整数和浮点数类型检查。
在验证过程中，当输入不符合规定时，Angular的内置验证机制会为ng-invalid类的输入元素添加特定样式，如背景颜色变为红色 (#ee82ee)，边框添加1像素实线 (#CCC)。为了增强用户体验，作者还使用了QTip库来显示错误提示信息，这是一种弹出式提示框，样式设置包括最大宽度、字体大小、边角圆润以及阴影效果。
HTML代码示例展示了如何在`<body>`标签中添加ng-app指令，以及包含`<form>`元素的结构。当用户尝试提交表单时，点击提交按钮会触发必填项验证，若输入有误，ng-invalid类将生效，并伴随QTip提示的出现。
作者还特别提到，由于对内置验证样式的重写，输入框的错误状态可以通过`.ng-invalid`类直接识别，这使得开发者能够方便地定制视觉反馈，提升用户的交互体验。
本教程提供了Angular框架下如何利用jQuery和自定义CSS样式实现输入框的必填和类型验证，以及如何处理验证失败时的提示展示，有助于开发者更好地管理表单验证逻辑和用户界面。
}
} else {
if (!ctrl.$dirty && attrs.dirtyCheck) {
console.log('----');
} else {
validFn(ctrl.$modelValue, oldRules);
}
}
});
}
}
}]);
通过 监听 attrs.ngModel，验证规则 rules ，ctrl.$parser 来实现 输入框内容改变的响应。
一旦使用此directive，则动态为当前输入框添加ID，以便在 验证通过后，改变输入框的验证背景信息。
（4）验证逻辑处理 uiValidFactory
app.factory('uiValidFactory', ['$parse', 'uiTipsFactory', function ($parse, tips) {
return {
check: function (val, rules, $scope, defaultTips, extendParam) {
if (!rules) {
return {
flag: true
};
}
var rulesArr = rules.split(' '),
isBlank = val === null || val === undefined || val === '' || ('' + val === '');
//如果不是必填项 且没有输入值 则清除提示框
if ($.inArray('r', rulesArr) === -1 && isBlank) {
return {
flag: true
}
}
var i = 0, len = rulesArr.length;
for (; i < len; i++) {
var rule = rulesArr[i];
if (!rule) {
continue;
}
var flag = true;
if ('r' === rule) {
//如果是必填项，有值 返回true
flag = !isBlank;
} else if (rule.contains(':')) {
//如果校验规则是 fn:ctrl.certCheck
flag = this.checkRule(val, rule.split(/:/), $scope, extendParam);
} else {
//校验 规则是 int 用正则匹配 数字 邮箱 长度
var pat = this.pats[rule];
if (pat instanceof RegExp) {
if (angular.isString(val)) {
flag = this.mat(val, pat);
}
} else if (angular.isFunction(pat)) {
flag = pat(val);
} else {
flag = false;
}
}
//这是干什么的呢
if (angular.isString(flag)) {
return {
flag: false,
msg: flag,
rule: rule
}
}
if (flag === false) {
var msg = this.getMsg(rule, defaultTips) || this.getMsg('tips.valid');
console.log(msg);
return {
flag: false,
msg: msg,
rule: rule
}
}
}
return {
剩余11页未读，继续阅读
点击了解资源详情
点击了解资源详情
点击了解资源详情
2020-12-11 上传
2021-05-01 上传
2020-08-30 上传
2020-09-01 上传
点击了解资源详情
点击了解资源详情
weixin_38621630
- 粉丝: 3
- 资源: 913
我的内容管理
展开
最新资源
- 液体点滴速度监控装置（F题）
- 基于单片机的红外遥控自学习系统的设计
- 基于单片机的红外遥控信号自学习及还原方法
- 单片机开发及典型应用液晶显示 多种串口通讯 网络通讯 模糊控制
- 数据结构中关于多项式操作的代码
- Practical Programming in Tcl and Tk
- 单片机的数字时钟设计
- 硬件工程师必读攻略一 、数模混合设计的难点 二、提高数模混合电路性能的关键 三、仿真工具在数模混合设计中的应用 四、小结 五、混合信号PCB设计基础问答
- JavaScript实现日历控件
- 软件设计师历年试题分析与解答
- ASP环境下的安全技术分析
- 巴音郭楞职业技术学院OA办公自动化系统研究
- ISO-17799安全标准中文版.pdf
- asp.net常用函数表.doc
- VSS的安装过程，很详细
- g4lmod0.16
