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 相关文章推荐
JS中使用Array函数shift和pop创建可忽略参数的例子
May 28 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
jQuery each函数源码分析
May 25 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
详解vue的diff算法原理
May 20 Javascript
详解微信JS-SDK选择图片遇到的坑
Aug 15 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
js实现单元格拖拽效果
Feb 10 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
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
Php Cookie的一个使用注意点
2008/11/08 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
浅析PHP7 的垃圾回收机制
2019/09/06 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
浅谈laravel aliases别名的原理
2019/10/24 PHP
ECMAScript 基础知识
2007/06/29 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
JS给按钮添加跳转功能类似a标签
2017/05/30 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
使用Angular CLI进行Build(构建)和Serve详解
2018/03/24 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
js实现跟随鼠标移动的小球
2019/08/26 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Java中重定向输出流实现用文件记录程序日志
2015/06/12 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python for和else语句趣谈
2019/07/02 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
Python Opencv实现单目标检测的示例代码
2020/09/08 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
美国时尚配饰品牌:Dooney & Bourke
2017/11/14 全球购物
活动总结格式范文
2014/04/26 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
python unittest单元测试的步骤分析
2021/08/02 Python