有角度输入框实现自定义验证功能

此插件使用angular.js、JQuery实现(jQuery。的引入需在有角的之前)

用户可以在输入框输入数据后验证必填项、整数型、浮点型验证。

如果在形式里面的输入框验证，可以点击提交按钮后，实现必填项验证。

效果图如下：

(1)验证未通过时，背景标红等样式为

输入。ng-无效，选择。ng-无效{ background-color: #ee82ee！重要；border: 1px固体# CCC}。qtip {位置：绝对值；最大宽度： 260 px显示器：无；最小宽度： 50pxfont-size : 10.5 px线高： 12px方向ltr}。qtip-内容{位置：相对；padding: 5px 9px飞越：隐藏；文本-左对齐：单词包装：断字；} .qtip-四舍五入qtip-tipsy {-moz-border-radius : 5px；-web套件-边框-半径： 5px边界半径： 5px} .qtipmodal-ie6 fix {位置：绝对！重要；} .框-阴影-提示{背景-颜色： # F63边框-颜色： # F5a 88F颜色：白色；-moz-box-shadow : 2px 2px 2px # 969696；-web套件-box-shaon w : 2px 2px 2px # 969696；盒影： 2px 2px 2px # 969696}因为angular.js内置验证未通过时，会自动为标签增加ng .无效样式，因为这里重写此样式

输入。ng-无效，选择。ng-无效{ background-color: #ee82ee！重要；border: 1px固体# CCC}(2)HTML代码如下

body ng-app=' myApp '表单名称=' baseInfoForm ' div ng-controller=' Testctrl '输入类型=' text ' ng-model=' age ' my-valid=' r ' br输入类型=' text ' ng-model=' name ' my-valid=' int fn : cert check ' br输入类型='按钮'值='提交ng-click=' submit()'/div/form/body(3)此插件使用指令myValid实现

app.directive('myValid '，['$parse '，' uiTipsFactory '，' uiValidFactory '，function ($parse，tips，valid){ var uiValidAttrIdName=' ui-valid-id '；返回{ restrict: 'A '，require: ' ngModel '，link:函数(范围、el、属性、ctrl){ var valid=El。attr(uivalidattrdname)；if(！有效){有效=数学。guid()；El . attr(uivalidattredname，valid } var GetRules=function(){ return attr。myvalid};