AngularJS使用angular-formly进行表单验证
当验证表单中有很多字段时,这时候可能希望把html的生成以及验证逻辑放到controller中,在页面,也许是这样的:
<some-formfiedls="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){ varvalue=$modelValue||$viewValue; if(value){ returnvalidateDriversLicence(value); } }, expressionProperties:{ 'templateOptions.disabled':function($viewValue,$modelValue,scope){ if(scope.model.province=='山东省'){ returnfalse; } returntrue; } } }
首先安装:npminstallangular-formlyangular-formly-templates-bootstrapbootstrapapi-check
Demo的文件结构:
css/
.....style.css
node_modules/
scripts/
.....MainController.js
.....provinces.js[提供select的选项,有关省]
app.js
index.html
index.html
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="gb2312"> <title></title> <linkrel="stylesheet"href="css/style.css"/> <linkrel="stylesheet"href="node_modules/bootstrap/dist/css/bootstrap.min.css"/> </head> <bodyng-app="formlyApp"ng-controller="MainControllerasvm"> <divclass="containercol-md-4col-md-offset-4"> <formnovalidate> <formly-formmodel="vm.rental"fields="vm.rentalFields"form="vm.rentalForm"> <buttontype="submit"class="btnbtn-primary"ng-disabled="vm.rentalForm.$invalid">提交</button> </formly-form> </form> </div> <!--项目依赖--> <scriptsrc="node_modules/api-check/dist/api-check.js"></script> <scriptsrc="node_modules/angular/angular.min.js"></script> <scriptsrc="node_modules/angular-formly/dist/formly.js"></script> <scriptsrc="node_modules/angular-formly-templates-bootstrap/dist/angular-formly-templates-bootstrap.min.js"></script> <!--项目引用--> <scriptsrc="app.js"></script> <scriptsrc="scripts/MainController.js"></script> <scriptsrc="scripts/province.js"></script> </body> </html>
app.js
(function(){ 'usestrict'; angular.module('formlyApp',['formly','formlyBootstrap']) })();
province.js
以factory的方式返回一个对象,包含获取select选项的方法。
(function(){ 'usestrict';
angular
.module('formlyApp') .factory('province',province); functionprovince(){ functiongetProvinces(){ return[ { "name":"山东省", "value":"山东省" }, { "name":"江苏省", "value":"江苏省" } ]; } return{ getProvinces:getProvinces } } })();
MainController.js
(function(){ 'usestrict'; angular .module('formlyApp') .controller('MainController',MainController); functionMainController(province){ varvm=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){ varvalue=$modelValue||$viewValue; if(value){ returnvalidateDriversLicence(value); } }, expressionProperties:{ 'templateOptions.disabled':function($viewValue,$modelValue,scope){ if(scope.model.province=='山东省'){ returnfalse; } returntrue; } } } }, { key:'insurance', type:'input', templateOptions:{ label:'保险', placeholder:'输入保险' }, hideExpression:'!model.under18||!model.province' } ]; functionvalidateDriversLicence(value){ return/[A-Za-z]\d{4}[\s|\-]*\d{5}[\s|\-]*\d{5}$/.test(value); } } })();
以上内容是小编给大家分享的AngularJS使用angular-formly进行表单验证的全部叙述,希望大家喜欢。