AngularJs的表单验证
验证 表单 angularjs
2023-09-11 14:22:24 时间
如果你想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加novalidate标记.
1 <form name="form" novalidate> 2 <label name="email">Your Email</label> 3 <input type="email" name="email" ng-model="email" placeholder="Email Address" /> 4 </form>
上面的代码,你可以删去或添加上novalidate,输入错误的email,会有不同的提示.
一.表单指令.
1.必填项:required.
2.最小长度:ng-minlength='{number}'
1 <input type="text" ng-minlength=5 />
2.最小长度:ng-maxlength='{number}'
1 <input type="text" ng-maxlength=5 />
4.模式匹配:ng-pattern="/正则表达式/"
1 <input type="text" ng-pattern='[a-zA-Z]' />
二:表单中的变量(formName.inputFiledName.property)
未修改的表单:未修改,值为true.否则为false. formName.inputFiledName.$pristine
修改过的表单:只要修改过了,不管验证是否通过,就是true. formName.inputFiledName.$dirty
合法的表单:判断表单内容是否合法,合法就是true. .formName.inputFiledName.$valid
不合法表单:如果不合法,值为true .formName.inputFiledName.$invalid
错误对象.包含当前表单的所有验证内容,以及他们是否合法的信息. .formName.inputFiledName.$error
1 <!DOCTYPE html> 2 <html ng-app="formModel"> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> 7 <script type="text/javascript" src="js/angular-1.2.16.js" ></script> 8 </head> 9 <body ng-controller="formCtrl"> 10 <form name="myForm" style="margin: 100px;" ng-submit="submitForm(myForm.$valid)"> 11 必填项,eamail 12 <input name="personEmail" required="required" type="email" ng-model="person.email" placeholder="必填项,eamail" /> 13 <br /><br />必填项,最小3个字符 14 <input name="personName" required ng-model="person.name" ng-minlength=3 placeholder="必填项,最小3个字符" /> 15 <br /> 16 <input type="submit" ng-disabled="myForm.$invalid" value="提交"/> 17 </form> 18 <span>myForm.personEmail.$valid:{{myForm.personEmail.$valid}}</span><br /> 19 <span>myForm.personEmail.$error.required:{{myForm.personEmail.$error.required}}</span><br /> 20 <span>myForm.personEmail.$error.email:{{myForm.personEmail.$error.email}}</span><br /> 21 <span>myForm.personEmail.$pristine:{{myForm.personEmail.$pristine}}</span><br /> 22 <span>myForm.personEmail.$error:{{myForm.personEmail.$error}}</span> 23 </body> 24 <script type="text/javascript"> 25 var myModule=angular.module("formModel",[]); 26 myModule.controller("formCtrl",function($scope){ 27 $scope.person={ 28 name:"", 29 email:"" 30 }; 31 $scope.submitForm=function(vailid){ 32 alert(vailid); 33 } 34 }) 35 36 </script> 37 </html>
三:css样式:
AngularJs处理表单时,会根据表单当前的状态添加一些css类.
.ng-pristine{} 未修改的样式.
.ng-dirty{} 修改过后的样式
.ng-valid{} 验证合法时
.ng-invalid{} 验证不合法时.
1 .personName.ng-pristine{ 2 border: 1px solid blue; 3 } 4 .personName.ng-dirty{ 5 border: 1px solid yellow; 6 } 7 .personName.ng-invalid{ 8 border: 1px solid red; 9 } 10 .personName.ng-valid{ 11 border: 1px solid green; 12 }
把这段代码加入到上面的例子,就能看到效果了.
相关文章
- 4.前端注册表单验证 && 表单回填
- 就表单验证说用户体验
- MVC+三层+ASP.NET简单登录验证
- js_ jq 正则表达式判断是否是数字和浮点类型,int类型和double类型,附_layui表单验证
- iOS使用Security.framework进行RSA 加密解密签名和验证签名
- 软件测试/测试开发 | 接口自动化测试中,如何做断言验证?
- JS正则(RegExp对象)判断手机号是否合法(表单验证)
- 进行接口测试时,连接数据库,对数据源进行备份、还原、验证操作
- 《Spring 5 官方文档》5. 验证、数据绑定和类型转换(一)
- Vue项目--尚品汇(图片懒加载,表单验证)
- JSON-Schema 最科学的表单验证模式
- CogIDTool工具 ID读码和验证工具
- AngularJS表单验证,手动验证或自动验证
- 使用Axure RP原型设计实践06,登录验证
- Java验证是否为纯数字
- bcrypt.js实现对登录注册中密码的加密存储和验证
- 微信小程序 - 表单验证插件WxValidate使用
- 项目中 除表单验证外 进行未输入验证 提示 (提交,取消)
- laravel的表单验证(下面有些信息未验证,转的)
- vant-ui表单验证
- 基于Bootstrap+jQuery.validate Form表单验证实践【转】
- 【数字IC验证进阶】正则表达式(Regular Expression)快速入门指南
- 使用java连接AD域,验证账号密码是否正确
- [LeetCode] Valid Word Square 验证单词平方
- 登录验证过滤器