发表于： 2017-05-29 23:13:41
3 1036
干了啥/收获
和产品 以及后台交互。
做了二级联动的Deom(用纯JS)。
看需求，问产品。老需求 被产品推翻了一些东西。
之前用的H5的表单验证。。但是和angular一起用就不够友好了。于是多了解了下angular表单验证：
我觉得把在angular里面比较关键的也是比较难理解的几个点是。
1：指令
2：服务
angular表单验证
在使用angular之前，都是用H5自带的表单验证。说实话也挺好用的。
angular的表单验证，能够将H5表单验证的功能和自己的验证指令结合起来进行使用，并且非常方便。
在angular中提供了很多表单验证的指令。比如：
<form name="form" novaildate>
<label name="email">你的邮箱</label>
<input type="email" name="email" ng-model="email" placeholder="输入邮箱"/>
</form>
如果要使用angular的表单验证，首先要确保表单必须要有一个name的属性所有的输入字段都可以进行基本验证，比如最大，最小长度等。这些功能都由H5的表单属性提供，如果想要屏蔽浏览器对于表单默认的验证行为，可以在表单上添加novaildate的标记。
1.必填项
验证表单输入是否已经添加 之前在dom元素上加上required标记即可
<input type="text" required/>
2.最小长度
验证表单输入的文本是否大于某个最小值，可以在输入的字段上使用指令 ng-minlength="{number}"
<input type="text" ng-minlength="5"/>
3.最大长度
验证表单输入的文本是否大于或者等于某个最大值，可以使用指定ng-maxlength="{number}"
<input type="text" ng-maxlength="5"/>
4.匹配模式
使用ng-pattern="/PATTERN/"来确保输入能匹配指定的正则表达式
<input type="text" ng-pattern="[a-zA-Z]"/>
5.电子邮件
验证输入的文本是否是电子邮箱可以使用 type=email来实现
<input type="email" name="email" ng-model="user.email" />
6.是否数字
验证输入的文本是否是为数字可以使用 type=number来实现
<input type="number" name="age" ng-model="user.age" />
7.URL
验证输入的文本是否是为url可以使用 type=url来实现
<input type="url" name="homepage" ng-model="user.homepage" />
8.表单属性
以上就是常用的一些内置的指令，关于自定义的指令，我会在后面的文章里来说明。下面继续说下在表单验证中的控制变量。表单的属性可以在所在作用域的$scope对象中访问到，而我们又可以访问$scope对象因为JavaScript可以间接地访问dom中的表单属性借助这些属性，我们可以对表单做出实时的响应（双向绑定）这些属性包括下面这些.（可以通过formName.inputfieldName.property这种格式来访问这些属性）
1:未修改的表单
这是一个布尔类型的属性，用来判断用户是否修改了表单，如果未修改，值为true否则为false
formName.inputfieldName.$pristine
2:修改过的表单
只要用户修改过表单无论输入是否验证通过都返回true
formName.inputfieldName.$dirty
3:合法的表单
这个布尔属性用来判断表单的内容是否不合法，如果当前的表单内容是合法的。该属性就返回为true
formName.inputfieldName.$valid
4：不合法的表单
这个布尔属性用来判断表单的内容是否不合法，如果当前的表单内容是不合法的，该属性就返回为true
formName.inputfieldName.$invalid
5：错误
这是angular提交的另一个非常有用的属性：$error对象，她包含当前表单所有的验证内容。以及它们是否合法的信息，可以这样来访问formName.inputfieldName.$error,如果验证失败这个属性值为true，如果值为false说明通过了验证。
关于错误提示的一些样式
angular处理表单时，会根据表单当前的状态添加一些css样式，包括验证失败，验证成功等等，这些样式和之前的属性也类型。如下
.ng-pristine{}
.ng-dirty{}
.ng-valid{}
.ng-invalid{}
这个样式对于这个不同的表单状态比如当输入的字段非法时，.ng-invlid这个样式会被加到这个字段上。这样我们就可以根据自己的需求，来更改这些样式。
话说了这多。代码怎么写呢下面呢，我来通过一个表单注册的例子来整体回顾下上面的内容
<!doctype html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
<form name="signup_form" novalidate ng-submit="signupForm()">
<fieldset>
<legend>Signup</legend>
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Your email</label>
<input type="email"
placeholder="Email"
name="email"
ng-model="signup.email"
ng-minlength=3 ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.email.$dirty && signup_form.email.$invalid">
<small class="error"
ng-show="signup_form.email.$error.required">
Your email is required.
</small>
<small class="error"
ng-show="signup_form.email.$error.minlength">
Your email is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.email.$error.email">
That is not a valid email. Please input a valid email.
</small>
<small class="error"
ng-show="signup_form.email.$error.maxlength">
Your email cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="large-12 columns">
<label>Username</label>
<input type="text"
placeholder="Desired username"
name="username"
ng-model="signup.username"
ng-minlength=3
ng-maxlength=20
ensure-unique="username" required />
<div class="error" ng-show="signup_form.username.$dirty && signup_form.username.$invalid">
<small class="error" ng-show="signup_form.username.$error.required">Please input a username</small>
<small class="error" ng-show="signup_form.username.$error.minlength">Your username is required to be at least 3 characters</small>
<small class="error" ng-show="signup_form.username.$error.maxlength">Your username cannot be longer than 20 characters</small>
<small class="error" ng-show="signup_form.username.$error.unique">That username is taken, please try another</small>
</div>
</div>
<button type="submit" ng-disabled="signup_form.$invalid" class="button radius">Submit</button>
</fieldset>
</form>
<script>
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);
});
});
}
};
}]);
</script>
</body>
</html>
表单的名字是signup_form 提交的表单时调用signupForm()在表单中我添加了一些验证，验证要求name字段最小的长度是3个字符，最大长度是20个字符等等。在下面的div里面我们通过ng-show指令结合表单的验证属性来动态的显示错误信息。在验证用户名的时候我通过了创建了一个自定义的指令，来通过异步请求来查询用户名是否合法。
上面的所有验证都是在用户输入的时候直接提示错误的。如果我们不想这么做。只想在用户提交的时候来显示错误信息
要如何来处理呢。也简单。把上面的代码稍作修改
<!doctype html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/foundation/4.3.2/css/foundation.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
</head>
<body>
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<fieldset>
<legend>Signup</legend>
<div class="row">
<div class="large-12 columns">
<label>Your name</label>
<input type="text"
placeholder="Name"
name="name"
ng-model="signup.name"
ng-minlength=3
ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
<small class="error"
ng-show="signup_form.name.$error.required">
Your name is required.
</small>
<small class="error"
ng-show="signup_form.name.$error.minlength">
Your name is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.name.$error.maxlength">
Your name cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<label>Your email</label>
<input type="email"
placeholder="Email"
name="email"
ng-model="signup.email"
ng-minlength=3 ng-maxlength=20 required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
<small class="error"
ng-show="signup_form.email.$error.required">
Your email is required.
</small>
<small class="error"
ng-show="signup_form.email.$error.minlength">
Your email is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.email.$error.email">
That is not a valid email. Please input a valid email.
</small>
<small class="error"
ng-show="signup_form.email.$error.maxlength">
Your email cannot be longer than 20 characters
</small>
</div>
</div>
</div>
<div class="large-12 columns">
<label>Username</label>
<input type="text"
placeholder="Desired username"
name="username"
ng-model="signup.username"
ng-minlength=3
ng-maxlength=20
ensure-unique="username" required />
<div class="error"
ng-show="signup_form.name.$dirty && signup_form.name.$invalid && signup_form.submitted">
<small class="error"
ng-show="signup_form.username.$error.required">
Please input a username
</small>
<small class="error"
ng-show="signup_form.username.$error.minlength">
Your username is required to be at least 3 characters
</small>
<small class="error"
ng-show="signup_form.username.$error.maxlength">
Your username cannot be longer than 20 characters
</small>
<small class="error"
ng-show="signup_form.username.$error.unique">
That username is taken, please try another
</small>
</div>
</div>
<button type="submit" class="button radius">Submit</button>
</fieldset>
</form>
<script>
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);
});
});
}
};
}])
.controller('signupController', ['$scope', function($scope) {
$scope.submitted = false;
$scope.signupForm = function() {
if ($scope.signup_form.$valid) {
// Submit as normal
} else {
$scope.signup_form.submitted = true;
}
}
}]);
</script>
</body>
</html>
明天做啥：尽量写完方案。多写DOME验证.
问题：二级联动 其实完全可以被ng if等取代嘛。。有时候会很懵逼。。不知道该从何入手这个复盘。
返回列表
评论