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


Posted in Javascript onDecember 27, 2015

当验证表单中有很多字段时,这时候可能希望把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进行表单验证的全部叙述,希望大家喜欢。

Javascript 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
微信小程序点击顶部导航栏切换样式代码实例
Nov 12 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
延时加载JavaScript代码提高速度
Dec 27 #Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 #Javascript
详解maxlength属性在textarea里奇怪的表现
Dec 27 #Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 #Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 #Javascript
JavaScript的removeChild()函数用法详解
Dec 27 #Javascript
JavaScript构造函数详解
Dec 27 #Javascript
You might like
真正的ZIP文件操作类(php)
2007/07/21 PHP
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
PHP处理会话函数大总结
2015/08/05 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
网页中的图片的处理方法与代码
2009/11/26 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
2018/11/13 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python random模块常用方法
2014/11/03 Python
numpy自动生成数组详解
2017/12/15 Python
浅谈python可视化包Bokeh
2018/02/07 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python里dict变成list实例方法
2019/06/26 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
对python中各个response的使用说明
2020/03/28 Python
Belle Maison倍美丛官网:日本千趣会旗下邮购网站
2016/07/22 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
晚宴邀请函范文
2014/01/15 职场文书
社区包粽子活动方案
2014/01/21 职场文书
教代会开幕词
2015/01/28 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
海贼王十大潜力果实,路飞仅排第十,第一可毁世界(震震果实)
2022/03/18 日漫