您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！
第四天，简单的表单验证，今天主要学习了angularjs中的表单验证的一些基本概念及其简单应用
第一、表单验证的简单理解
表单验证是angularjs中比较重要的一个核心功能
表单验证可以结合html5的验证特殊使用，当然也可以禁用浏览器对表单的默认验证，添加属性【novalidate】即可
表单验证毕竟只是前端js验证，在后端代码中一定需要对其数据的合法性做再次验证
angularjs提供了一些常见的系统验证，当然也可以自定义表单验证
第二、简单了解学习anjularjsz自带的表单验证
1.必填验证：required，直接添加required属性即可
2.最小长度：ng-minlength，使用ng-minlength=“最小长度值”
3.最大长度：ng-maxlength,使用ng-maxlength=“最大长度值”
4.模式匹配：ng-pattern，使用ng-pattren="模式匹配的正则表达式"
5.邮箱：email,使用直接给文本框的type属性值赋值为email即可--type="email"
6.数字：number,使用直接给文本框的type属性值赋值为number即可--type="number"
7.网页地址：url,使用直接给文本框的type属性值赋值为url即可--type="url"
第四、表单中的控制变量
1.表单的属性值访问方式为：表单名称.文本框名称.属性名称
2.表单验证中用到的表单属性包括如下：
未修改的表单：属性名称关键词【pristine】，bool类型，如果为修改为ture
用户修改过的表单：属性关键词【dirty】,bool类型,只有修改了就为true
合法的表单：属性关键词【valid】，bool类型，只有当表单内容合法才为true
不合法表单：属性关键词【invalid】，bool类型，只要有不合法的都为true
错误：属性关键词【error】,bool类型，只要有不合法的都为true
第五、简单实现注册页面的表单验证
在实现的方式上，根据不同的体验，大致有三种方式
其一、对表单输入实时验证，只有表单验证都通过，才提交表单
实现方式：通过控制提交按钮的可用性来实现
ng-disabled="loginForm.$invalid"
下面举例一个练习实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .oneCount { width:1000px; height:60px; line-height:60px; border-bottom:1px solid blue; } .oneCount .titleCount { float: left; width: 150px; text-align: right; } .oneCount .valueCount { float: left; width: 300px; text-align: right; } .oneCount .valueCount input { width: 300px; } .oneCount .alertCount { float: left; width: 520px; margin-left:20px; } .oneCount .alertCount span{ float: left; margin-left: 10px; color:#ff0000; } .success { color:#19e1cf !important; } input .ng-pristine { color: #808080; border-bottom: 1px solid #ff0000; } input .ng-dirty { color: #000000; } input .ng-valid { color: #000000; } input .ng-invalid { color: #ff0000; } </style> </head> <body ng-app="myApp" ng-controller="myContro"> <form name="loginForm" novalidate ng-submit="submitForm()"> <div class="oneCount"> <div class="titleCount">账号：</div> <div class="valueCount"> <input type="text" name="acount" ng-model="user.acount" placeholder="必填：账号必须由数字字母组合，长度在6-20" required="required" ng-minlength="6" ng-maxlength="20" ng-pattern="/^[0-9a-zA-Z]+$/"/> </div> <div class="alertCount"> <span class="warning">*</span> <span class="warning" ng-show="loginForm.acount.$dirty&&loginForm.acount.$error.required">acount必填</span> <span class="warning" ng-show="loginForm.acount.$error.minlength">最少长度为6</span> <span class="warning" ng-show="loginForm.acount.$error.maxlength">最大长度为20</span> <span class="warning" ng-show="loginForm.acount.$error.pattern">账号格式不符合要求（只能由数字和字母组成）</span> <span class="success" ng-show="loginForm.acount.$dirty&&loginForm.acount.$valid">账号输入正确</span> </div> </div> <div class="oneCount"> <div class="titleCount">姓名：</div> <div class="valueCount"> <input type="text" name="name" ng-model="user.name" placeholder="请输入姓名" ng-maxlength="20" /> </div> <div class="alertCount"> <span class="warning" ng-show="loginForm.name.$error.maxlength">姓名最大长度为20</span> <span class="success" ng-show="loginForm.name.$dirty&&loginForm.name.$valid">姓名输入正确</span> </div> </div> <div class="oneCount"> <div class="titleCount">年龄：</div> <div class="valueCount"> <input type="number" name="age" ng-model="user.age" placeholder="请输入年龄" /> </div> </div> <div class="oneCount"> <div class="titleCount">密码：</div> <div class="valueCount"> <input type="password" name="pass" ng-model="user.pass" placeholder="必填：请输入密码，密码长度在6-20" required="required" ng-minlength="6" ng-maxlength="20" /> </div> <div class="alertCount"> <span class="warning">*</span> <span class="warning" ng-show="loginForm.pass.$dirty&&loginForm.pass.$error.required">密码必填</span> <span class="warning" ng-show="loginForm.pass.$error.minlength">最少长度为6</span> <span class="warning" ng-show="loginForm.pass.$error.maxlength">最大长度为20</span> <span class="success" ng-show="loginForm.pass.$dirty&&loginForm.pass.$valid">密码输入正确</span> </div> <div class="oneCount"> <div class="titleCount"></div> <div class="valueCount"> <input type="submit" value="提交" ng-disabled="loginForm.$invalid" style="40px;" /> </div> </div> </form> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope) { $scope.user = { acount: "", name: "", age: "", pass: "", rePass: "" }; //提交表单接受函数 $scope.submitForm = function () { //// 表单真实提交逻辑 alert("提交表单"); } }); </script>
其二、先触发提交表单事件，在统一对表单数据验证，只有同验证通过才提交数据到后台处理
实现方式：可以给表单添加一个属性，初始化赋值为false，只有提交后才赋值为ture
验证结果提示信息，只有该属性值为true,才显示显示错误信息
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .oneCount { width:1000px; height:60px; line-height:60px; border-bottom:1px solid blue; } .oneCount .titleCount { float: left; width: 150px; text-align: right; } .oneCount .valueCount { float: left; width: 300px; text-align: right; } .oneCount .valueCount input { width: 300px; } .oneCount .alertCount { float: left; width: 520px; margin-left:20px; } .oneCount .alertCount span{ float: left; margin-left: 10px; color:#ff0000; } .success { color:#19e1cf !important; } input .ng-pristine { color: #808080; border-bottom: 1px solid #ff0000; } input .ng-dirty { color: #000000; } input .ng-valid { color: #000000; } input .ng-invalid { color: #ff0000; } </style> </head> <body ng-app="myApp" ng-controller="myContro"> <form name="loginForm" novalidate ng-submit="submitForm()"> <div class="oneCount"> <div class="titleCount">账号：</div> <div class="valueCount"> <input type="text" name="acount" ng-model="user.acount" placeholder="必填：账号必须由数字字母组合，长度在6-20" required="required" ng-minlength="6" ng-maxlength="20" ng-pattern="/^[0-9a-zA-Z]+$/"/> </div> <div class="alertCount"> <span class="warning">*</span> <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$dirty&&loginForm.acount.$error.required">acount必填</span> <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.minlength">最少长度为6</span> <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.maxlength">最大长度为20</span> <span class="warning" ng-show="loginForm.submitted&&loginForm.acount.$error.pattern">账号格式不符合要求（只能由数字和字母组成）</span> <span class="success" ng-show="loginForm.submitted&&loginForm.acount.$dirty&&loginForm.acount.$valid">账号输入正确</span> </div> </div> <div class="oneCount"> <div class="titleCount">姓名：</div> <div class="valueCount"> <input type="text" name="name" ng-model="user.name" placeholder="请输入姓名" ng-maxlength="20" /> </div> <div class="alertCount"> <span class="warning" ng-show="loginForm.submitted&&loginForm.name.$error.maxlength">姓名最大长度为20</span> <span class="success" ng-show="loginForm.submitted&&loginForm.name.$dirty&&loginForm.name.$valid">姓名输入正确</span> </div> </div> <div class="oneCount"> <div class="titleCount">年龄：</div> <div class="valueCount"> <input type="number" name="age" ng-model="user.age" placeholder="请输入年龄" /> </div> </div> <div class="oneCount"> <div class="titleCount">密码：</div> <div class="valueCount"> <input type="password" name="pass" ng-model="user.pass" placeholder="必填：请输入密码，密码长度在6-20" required="required" ng-minlength="6" ng-maxlength="20" /> </div> <div class="alertCount"> <span class="warning">*</span> <span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$dirty&&loginForm.pass.$error.required">密码必填</span> <span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$error.minlength">最少长度为6</span> <span class="warning" ng-show="loginForm.submitted&&loginForm.pass.$error.maxlength">最大长度为20</span> <span class="success" ng-show="loginForm.submitted&&loginForm.pass.$dirty&&loginForm.pass.$valid">密码输入正确</span> </div> <div class="oneCount"> <div class="titleCount"></div> <div class="valueCount"> <input type="submit" value="提交" style="40px;" /> </div> </div> </div> </form> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope) { $scope.user = { acount: "", name: "", age: "", pass: "", rePass: "" }; $scope.submitted = false; //提交表单接受函数 $scope.submitForm = function () { if ($scope.loginForm.$valid) { //// 表单数据真实提交逻辑 } else { $scope.loginForm.submitted = true; } } }); </script>
其三、失去焦点后验证
时间不早了，明天在仔细研究该问题
今天就到此为止，明天继续研究表单验证，明天学习包括如下几点
表单失去焦点的验证
表单提示信息展示优化，以便提高代码复用性
自定义表单验证