介绍 & lt; form 类=癴orm-horizontal", name=癴orm",角色=癴orm", ng-controller=癡alidCtrl"比;
,& lt; div 类=癴orm-group"比;
& lt;才能label =皍ser",类=癱ol-sm-2 control-label",在用户名& lt;/label>
& lt;才能div 类=癱ol-sm-5"比;
,,& lt; input 类型=皌ext", ng-model=皍ser", name=皍ser", id=皍ser", user-validator 类=癴orm-control",要求=皉equired"比;
& lt;才能/div>
& lt;才能label 类=癱ol-sm-5", ng-show=癴orm.user pristine"美元;在请输入用户名& lt;/label>
& lt;才能label 类=癱ol-sm-5", ng-show=癴orm.user error.required 美元;,,,form.user dirty"美元;比;
,,用户名不能为空
& lt;才能/label>
& lt;才能label 类=癱ol-sm-5", ng-show=癴orm.user error.defined 美元;,,,form.user dirty"美元;比;
,,用户名不符合规则
& lt;才能/label>
& lt;才能label 类=癱ol-sm-5", ng-show=癴orm.user valid 美元;,,,form.user dirty"美元;比;
,,用户名有效
& lt;才能/label>
,& lt;/div>
& lt;/form> angular.module (& # 39; shuffleApp& # 39;,, [])
,.directive (& # 39; userValidator& # 39;,,(& # 39;日志# 39;美元,函数(日志),{
,,return {
,,,,限制:,& # 39;一个# 39;
,,,,要求:,& # 39;ngModel& # 39;
,,,,链接:,函数(范围、美元,美元元素,,$ attrs, ngModelCtrl美元),{
,,,,,,var verifyRule =, [/^ \ d + $/,/^ [a - z] + $/,/^ [a - z] + $/];
,,,,,,var verify =,功能(输入),{
,,,,,,,,return ! (verifyRule [0] test(输入),| |,
,,,,,,,,,,,,,verifyRule [1] test(输入),| |,
,,,,,,,,,,,,,verifyRule [2] test(输入));
,,,,,,};
,,,,,,ngModelCtrl。parsers.push美元(功能(输入),{
,,,,,,,,var validity =,验证(输入);
,,,,,,,,ngModelCtrl。setValidity美元(& # 39;定义# 39;,,有效性);
,,,,,,,,return validity ?, input :,假;
,,,,,,});
,,,,,,ngModelCtrl。formatters.push美元(功能(输入),{
,,,,,,,,var validity =,验证(输入);
,,,,,,,,ngModelCtrl。setValidity美元(& # 39;定义# 39;,,有效性);
,,,,,,,,return validity ?, input :,假;
,,,,,,})
,,,,}
,,}
}]);才能
这篇文章将为大家详细讲解有关怎么在Angularjs中使用指令实现表单校验,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
如下为一个简易表单,有四项提示信息,依据状态呈现。校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合<代码> ng-pattern> user-validator>
<>强校验指令
校验指令代码如下:
指令内容非常简单,检测是否全为数字,小写字母、大写字母,然后取反即得到校验结果。然后在解析器,美元美元格式化程序内部设置校验结果即可。
关于怎么在Angularjs中使用指令实现表单校验就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
