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 相关文章推荐
Javascript技术技巧大全(五)
Jan 22 Javascript
jquery中通过父级查找进行定位示例
Jun 28 Javascript
document.write()及其输出内容的样式、位置控制
Aug 12 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
jquery分页对象使用示例
Apr 01 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
Javascript+CSS3实现进度条效果
Oct 28 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
js中数组对象去重的两种方法
Jan 18 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 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
非常好用的Zend Framework分页类
2014/06/25 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
js Date概念详细介绍
2013/11/22 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
$(document).ready(function() {})不执行初始化脚本
2014/06/19 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
JS 作用域与作用域链详解
2015/04/07 Javascript
js密码强度检测
2016/01/07 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
浅谈Cookie的生命周期问题
2016/08/02 Javascript
JS简单随机数生成方法
2016/09/05 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python中最大最小赋值小技巧(分享)
2017/12/23 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
对python3中, print横向输出的方法详解
2019/01/28 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python静态类型检查新工具之pyright 使用指南
2019/04/26 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
美国零售商店:Blue&Cream
2017/04/07 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
作弊检讨书1000字
2014/02/01 职场文书
领导干部考察材料
2014/02/08 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS
Vue深入理解插槽slot的使用
2022/08/05 Vue.js