Flask接口签名sign原理与实例代码浅析
218
2023-07-02
Angular表单验证实例详解
表单验证
我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码
ng-minlength=3 ng-maxlength=20 required />
angular.module("app", ['ngMessages']);
这样就可以了,有几个点要声明一下,
第一就是要引入angular-messages.js,
第二就是message跟messages一定要看清楚啊,
第三myForm.name.$error:这个myForm就是form的name值,name就是要验证的input的name值。
第四就是这个还可以自定义验证哈。
恩第五的话明前还没有,大神们可以看看还有什么要注意的,欢迎指出。
自定义验证来说下怎么搞吧,上代码
placeholder="Desired username"
name="username"
ng-model="signup.username"
ng-minlength=3
ng-maxlength=20
ensure-unique="username" required />
你看这个ensure-unique就是自定义的验证,就是需要独一无二呗,这就是在html上的写法,自定义的js代码就是自己写啦,这里也有一个这个对应的代码,是用指令写的,恩上代码
angular.module('myApp', [])
.directive('ensureUnique', ['$http', function($http) {
return {
require: 'ngModel',
link: function(scope, ele, attrs, c) {
scope.$watch(attrs.ngModel, function() {
$http({
method: 'POST',
url: '/api/check/' + attrs.ensureUnique,
data: {'field': attrs.ensureUnique}
}).success(function(data, status, headers, cfg) {
c.$setValidity('unique', data.isUnique);
}).error(function(data, status, headers, cfg) {
c.$setValidity('unique', false);
});
});
}
};
}]);
看到没,html,js两步完成自定义验证,就是自定义验证我感觉有点我有点low啊,搞不太来。反正我贴这两段代码就是告诉你们自定义验证的写法是咋样的,哈哈
恩,还有就是anglar的表单验证属性哈,反正上表格吧,一目了然哈,这个都是菜鸟网上有的,你们可以去搜索搜索哈
然后呢,这个怎么用呢,好的,上代码
name="myForm" novalidate>
用户名:
用户名是必须的。
邮箱:
邮箱是必须的。
非法的邮箱地址。
ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
myForm.email.$dirty && myForm.email.$invalid">
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.user = 'John Doe';
$scope.email = 'john.doe@gmail.com';
});
这个的用法总结几点,
1.只要用一个angular.js不需要引入别的js,但是缺点是什么你懂的啦,不能验证更多的条件啦,嘿嘿 ,这个看自己需求啦。
2.就是她是用ng-show来显示的,这里的myForm.user.$error.required这些个是怎么来的,还是跟上面一样的哈,都是name值,这个就是这样啦,你看required必填嘛,就对应这个$dirty啦so....myForm.user.$dirty ,哈哈 反正这些个代表的意思都在表格里啦。感觉这种的验证条件有效,还是那句话,看自己需求吧。
3.这种用法还有一个问题啊,就是比如说你要先验证一个required,你要是一开始输入框上没内容,他的那个验证提示是不会出现的,所以你要先js给它默认一个值,我感觉这种效果不好啊。所以你看到页面上$scope.user = 'John Doe';js给他先赋值了。
4.还要一个问题,你要先赋值嘛,然后你得搞个控制器啊,又得定义一个控制器,我感觉总结来说我还是觉得第一种方法好点吧。
5.还有一个问题,你每个Input记得绑定ng-model啊,要不然怎么监控。个人看法哈,
还有就是这两种其实也可以结合的,不行可以看代码。好的,上代码吧
ng-minlength=3 ng-maxlength=20 required />
名字
名字是必须的
var app=angular.module("app", ['ngMessages']);
app.controller('ctrl',function($scope){
$scope.name1='wenwen';http://
})
就是这样子。
以上所述是给大家介绍的Angular表单验证实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,会及时回复大家的。在此也非常感谢大家对我们网站的支持!
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~