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 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
二叉树先序遍历的非递归算法具体实现
Jan 09 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
Jul 27 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
Apr 25 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
vue动态路由:路由参数改变,视图不更新问题的解决
Nov 05 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 无限极分类
2008/03/27 PHP
第四章 php数学运算
2011/12/30 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
php fread函数使用方法总结
2019/05/28 PHP
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
2014/07/18 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
简介JavaScript中getUTCMonth()方法的使用
2015/06/10 Javascript
JS鼠标拖拽实例分析
2015/11/23 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
Vue父子模版传值及组件传值的三种方法
2017/11/27 Javascript
jQuery阻止事件冒泡实例分析
2018/07/03 jQuery
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
python实现二叉查找树实例代码
2018/02/08 Python
python获取url的返回信息方法
2018/12/17 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python的sorted用法详解
2019/06/25 Python
python 搜索大文件的实例代码
2019/07/08 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Python自省及反射原理实例详解
2020/07/06 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
战友聚会邀请函
2014/01/18 职场文书
CAD制图人员的自荐信
2014/02/07 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
合伙协议书
2014/04/23 职场文书
水电维修专业推荐信
2014/09/06 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
Java基础——Map集合
2022/04/01 Java/Android