AngularJs表单验证实例1
2016-05-24 11:18
519 查看
代码:
结果:
说明:
1.客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。
2.HTML
表单属性 novalidate 用于禁用浏览器默认的验证。
AngularJS ng-model 指令用于绑定输入元素到模型中。
模型对象有两个属性: user 和 email。
我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。
二、为表单验证状态添加自定义样式:
/*交互且必填样式*/
form.validate .ng-invalid-required.ng-dirty {
background-color: orange;
}
/*交互不合法样式*/
form .ng-invalid.ng-dirty {
background-color: lightpink;
}
/*邮件不合法且交互过*/
form.validate .ng-invalid-email.ng-dirty {
background-color: lightgoldenrodyellow;
}
.error {
color: red;
font-weight: bold;
}
/*不为空的验证通过*/
form .ng-not-empty.ng-valid {
/*color: green;
font-weight: bold;*/
border: 1px solid green;
}
更多:
AngularJs加载闪烁问题 ng-cloak
AngularJs Filter详解1-内置过滤器
AngularJs $scope.$apply
<h1>Validation Example</h1> <form class="form-horizontal container" ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <div class="form-group"> <label class="control-label">用户名:</label> <input class="form-control" name="user" type="text" ng-model="user" required /> <span class="text-danger" ng-show="myForm.user.$dirty && myForm.user.$invalid"> <span ng-show="myForm.user.$error.required">用户名是必须的</span> </span> </div> <div class="form-group"> <label class="control-label">邮箱:</label> <input class="form-control" name="email" type="email" ng-model="email" required /> <span class="text-danger" ng-show="myForm.email.$dirty && myForm.email.$invalid"> <span ng-show="myForm.email.$error.required">邮箱是必须的</span> <span ng-show="myForm.email.$error.email">邮箱格式不正确</span> </span> </div> <p> <button class="btn btn-success" ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty&&myForm.email.$invalid"> 确定提交 </button> </p> </form> <script> var app = angular.module('myApp', []); app.controller('validateCtrl', function ($scope) { $scope.user = 'admin'; $scope.email = "100@qq.com"; }); </script>
结果:
说明:
1.客户端的验证不能确保用户输入数据的安全,所以服务端的数据验证也是必须的。
2.HTML
表单属性 novalidate 用于禁用浏览器默认的验证。
实例解析
AngularJS ng-model 指令用于绑定输入元素到模型中。模型对象有两个属性: user 和 email。
我们使用了 ng-show指令, color:red 在邮件是 $dirty 或 $invalid 才显示。
属性 | 描述 |
---|---|
$dirty | 表单有填写记录 |
$valid | 字段内容合法的 |
$invalid | 字段内容是非法的 |
$pristine | 表单没有填写记录 |
/*交互且必填样式*/
form.validate .ng-invalid-required.ng-dirty {
background-color: orange;
}
/*交互不合法样式*/
form .ng-invalid.ng-dirty {
background-color: lightpink;
}
/*邮件不合法且交互过*/
form.validate .ng-invalid-email.ng-dirty {
background-color: lightgoldenrodyellow;
}
.error {
color: red;
font-weight: bold;
}
/*不为空的验证通过*/
form .ng-not-empty.ng-valid {
/*color: green;
font-weight: bold;*/
border: 1px solid green;
}
更多:
AngularJs加载闪烁问题 ng-cloak
AngularJs Filter详解1-内置过滤器
AngularJs $scope.$apply
相关文章推荐
- angularJS如何让控制器与控制器进行通信,个人理解。
- AngularJs加载闪烁问题 ng-cloak
- Angular的问题【学习angular的,建议看看】
- Angular 怎么在加载中加入 Loading 提示框
- AngularJs(二)设计思想和常用功能
- angular run()运行块
- 表单验证<AngularJs> form valid
- angularjs 实现国际化
- 快速搭建Web环境 Angularjs + Express3 + Bootstrap3
- AngularJs轮询器写法
- 走进AngularJs(七) 过滤器(filter) - 吕大豹
- AngularJS上拉加载问题解决方法
- angular - filter(自定义)
- AngularJS进阶(三十八)上拉加载问题解决方法
- AngularJS进阶(三十八)上拉加载问题解决方法
- angularjs事件指令--ngClick、ngDbclick、ngCut、ngChange、ngKeydown...
- AngularJS jqLite详情
- angularjs学习笔记—事件指令
- AngularJS 的常用特性(五)
- AngularJS 的常用特性(四)