脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs 表单验证

AngularJS使用angular-formly进行表单验证

 更新时间：2015年12月27日 12:56:25   作者：Darren Ji  
这篇文章主要介绍了AngularJS使用angular-formly进行表单验证的相关资料,需要的朋友可以参考下

当验证表单中有很多字段时，这时候可能希望把html的生成以及验证逻辑放到controller中，在页面，也许是这样的：

<some-form fiedls="vm.someFields" ...></some-form>

然后，在controller中定义各个字段以及验证。angular-formly就是为这个需求而存在。

在controller中，把各个字段定义在数组中：

vm.rentalFields = [
{
key:'first_name',
type:'input',
templateOptions:{
type:'text',
label:'姓',
placeholder: '输入姓',
required: true
}
},
...
]

使用hideExpression字段定义隐藏的条件：

{
key:'under18',
type:'checkbox',
templateOptions:{
label:'是否不满18岁'
},
hideExpression: '!model.email' //email验证失败之前不显示
}

使用validators字段自定义验证规则：

{
key:'license',
type:'input',
templateOptions:{
label:'身份证号',
placeholder:'输入身份证号'
},
hideExpression: '!model.province',
validators:{
driversLicense: function($viewValue, $modelValue, scope){
var value = $modelValue || $viewValue;
if(value){
return validateDriversLicence(value);
}
},
expressionProperties:{
'templateOptions.disabled':function($viewValue, $modelValue, scope){
if(scope.model.province == '山东省'){
return false;
}
return true;
}
}
}

首先安装：npm install angular-formly angular-formly-templates-bootstrap bootstrap api-check

Demo的文件结构：

css/
.....style.css
node_modules/
scripts/
.....MainController.js
.....provinces.js [提供select的选项，有关省]

app.js

index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title></title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="formlyApp" ng-controller="MainController as vm">
<div class="container col-md-4 col-md-offset-4">
<form novalidate>
<formly-form model="vm.rental" fields="vm.rentalFields" form="vm.rentalForm">
<button type="submit" class="btn btn-primary" ng-disabled="vm.rentalForm.$invalid">提交</button>
</formly-form>
</form>
</div>
<!--项目依赖-->
<script src="node_modules/api-check/dist/api-check.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-formly/dist/formly.js"></script>
<script src="node_modules/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></script>
<!--项目引用-->
<script src="app.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/province.js"></script>
</body>
</html>

app.js

(function(){
'use strict';
angular.module('formlyApp',['formly','formlyBootstrap'])
})();

province.js

以factory的方式返回一个对象，包含获取select选项的方法。

(function(){
'use strict';

angular

.module('formlyApp')
.factory('province', province);
function province(){
function getProvinces(){
return [
{
"name":"山东省",
"value":"山东省"
},
{
"name":"江苏省",
"value":"江苏省"
}
];
}
return {
getProvinces:getProvinces
}
}
})();

MainController.js

(function(){
'use strict';
angular
.module('formlyApp')
.controller('MainController', MainController);

function MainController(province){
var vm = this;

vm.rental = {};

vm.rentalFields = [
{
key:'first_name',
type:'input',
templateOptions:{
type:'text',
label:'姓',
placeholder: '输入姓',
required: true
}
},
{
key:'last_name',
type:'input',
templateOptions:{
type:'text',
label:'名',
placeholder:'输入名',
required:true
}
},
{
key:'email',
type:'input',
templateOptions:{
type:'email',
label:'邮箱',
placeholder:'输入邮箱',
required:true
}
},
{
key:'under18',
type:'checkbox',
templateOptions:{
label:'是否不满18岁'
},
hideExpression: '!model.email' //email验证失败之前不显示
},
{
key: 'province',
type:'select',
templateOptions:{
label:'选择省',
options: province.getProvinces()
},
hideExpression: '!model.email'
},
{
key:'license',
type:'input',
templateOptions:{
label:'身份证号',
placeholder:'输入身份证号'
},
hideExpression: '!model.province',
validators:{
driversLicense: function($viewValue, $modelValue, scope){
var value = $modelValue || $viewValue;
if(value){
return validateDriversLicence(value);
}
},
expressionProperties:{
'templateOptions.disabled':function($viewValue, $modelValue, scope){
if(scope.model.province == '山东省'){
return false;
}
return true;
}
}
}
},
{
key: 'insurance',
type: 'input',
templateOptions:{
label:'保险',
placeholder:'输入保险'
},
hideExpression: '!model.under18 || !model.province'
}
];
function validateDriversLicence(value) {
return /[A-Za-z]\d{4}[\s|\-]*\d{5}[\s|\-]*\d{5}$/.test(value);
}
}
})();

以上内容是小编给大家分享的AngularJS使用angular-formly进行表单验证的全部叙述，希望大家喜欢。

您可能感兴趣的文章:

相关文章

  • 详解angular脏检查原理及伪代码实现

    详解angular脏检查原理及伪代码实现

    这篇文章主要介绍了详解angular脏检查原理及伪代码实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Angular 4依赖注入学习教程之简介（一）

    Angular 4依赖注入学习教程之简介（一）

    依赖注入式AngularJS的重要特性之一，依赖注入简化了Angular解析模块/组件之间依赖的过程。下面这篇文章主要给大家介绍了关于Angular 4依赖注入基础的相关资料，文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-06-06
  • angular + express 实现websocket通信

    angular + express 实现websocket通信

    最近需要实现一个功能,后端通过TCP协议连接雷达硬件的控制器,前端通过websocket连接后端,当控制器触发消息的时候,把信息通知给所以前端,本文给的大家讲解angular + express 实现websocket通信的思路,感兴趣的朋友一起看看吧
    2023-09-09
  • AngularJS前端页面操作之用户修改密码功能示例

    AngularJS前端页面操作之用户修改密码功能示例

    这篇文章主要介绍了AngularJS前端页面操作之用户修改密码功能,结合具体实例形式分析了AngularJS针对前端用户修改密码的判断操作实现技巧,需要的朋友可以参考下
    2017-03-03
  • 从 Angular Route 中提前获取数据的方法详解

    从 Angular Route 中提前获取数据的方法详解

    这篇文章主要介绍了从 Angular Route 中提前获取数据,通过本文，你将学会使用 resolver， 在 Angular App 中应用 resolver，应用到一个公共的预加载导航，本文给大家介绍的非常详细，需要的朋友可以参考下
    2022-07-07
  • Angular表单验证实例详解

    Angular表单验证实例详解

    这篇文章主要介绍了angular表单验证的相关知识,angular来验证可以定义样式的，下文通过代码给大家实例介绍下，需要的朋友可以参考下
    2016-10-10
  • AngularJS基础 ng-hide 指令用法及示例代码

    AngularJS基础 ng-hide 指令用法及示例代码

    本文主要介绍AngularJS ng-hide 指令,这里整理了ng-hide指令的基础资料,并附实例代码,有兴趣的小伙伴参考下
    2016-08-08
  • AngularJS中的Directive自定义一个表格

    AngularJS中的Directive自定义一个表格

    本篇文章给大家介绍在angularjs中自定义一个有关表格的directive，涉及到angularjs directive相关知识，对本文感兴趣的朋友一起学习吧
    2016-01-01
  • AngularJS中下拉框的基本用法示例

    AngularJS中下拉框的基本用法示例

    这篇文章主要介绍了AngularJS中下拉框的基本用法,结合具体实例形式分析了AngularJS下拉框的元素绑定、选中及显示等功能实现方法,需要的朋友可以参考下
    2017-10-10
  • AngularJS 使用$sce控制代码安全检查

    AngularJS 使用$sce控制代码安全检查

    SCE，即strict contextual escaping,我的理解是 严格的上下文隔离 ...翻译的可能不准确，但是通过字面理解，应该是angularjs严格的控制上下文访问，通过本文给大家介绍AngularJS 使用$sce控制代码安全检查，对angularjs sce相关知识感兴趣的朋友一起学习吧
    2016-01-01

最新评论