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

web前端|js教程 AngularJS使用angular-formly进行表单验证_AngularJS

angularjs表单验证,用angularjs验证表单,angular_formly

web前端-js教程

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

django 交易网站源码,vscode压缩版,ubuntu固件制作,查看启动tomcat命令,cdata 爬虫,php 数组序号,鹤壁seo优化可靠吗,关于传媒的网站模板,投资公司模板lzw

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

linux 串口通讯源码,vscode怎么把图片变成圆角,ubuntu语言包下载,tomcat网页并发数,sqlite导入死锁,青海网页设计招聘,服务器屏蔽域名,相册弹出插件旋转,前端文档框架,爬虫族撒旦,php 获取文件列表,网站seo是什么意思,springboot并发上传,织梦网站修改首页图片,网页老虎机炎热宝石源码,opensns免费模板,dede 5.6 后台首页打开慢,创意404页面自适应源码,酒店管理系统java语言,网站小偷程序内嵌lzw

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

99mv源码,vscode设置格式化格式,ubuntu链接网,tomcat下有哪些文件,网络爬虫备案,php手册怎么用,湖南抖音seo搜索优化排名lzw

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

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进行表单验证的全部叙述，希望大家喜欢。