AngularJS使用angular-formly进行表单验证
当验证表单中有很多字段时，这时候可能希望把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进行表单验证的全部叙述，希望大家喜欢。
-
如果您不得不跟浏览器提交的表单数据打交道，视图函数里的代码将会很快变得 难以阅读。有不少的代码库被开发用来简化这个过程的操作。其中一个就是 WTForms ， 这也是我们今天主要讨论的。如果您发现您自己陷入处理很多表单的境地，那您也许 应该尝试一下他。 要使用 WTForms ，您需要先将您的表单定义为类。我建议您将应用分割为多个模块 (大型应用) ，这样的话您仅需为表单添加一个独立的模块。 挖掘
-
问题内容： 我有这种形式：http : //jsfiddle.net/dfJeN/ 如您所见，输入的名称值是静态设置的： ，则表单验证可以正常工作（添加一些内容并从输入中删除所有文本，必须显示一个文本）。 然后，我尝试动态设置名称值：http : //jsfiddle.net/jNWB8/ 然后我将其应用于我的验证 （此模式将在ng-repeat中使用），但我的表单验证已损坏。它在浏览器中已正确解
-
问题内容： 到目前为止，我已经使用纯JavaScript来验证表单，但是我需要在组合中添加mysqli查询。只有我对jquery和ajax不太了解。我可以做一个简单的登录表格，但这有点复杂。谁能给我有关如何添加jquery / ajax组件来验证这一点的任何指示： 问题答案： 您可以做的是发送$ .post像这样： 在你的 记得： 如果您要发布表单，请提交以添加到您的javascript函数中以手
-
问题内容： 我实际上正在尝试e2e测试我的简单应用程序，并且在处理angular- recaptcha（https://github.com/VividCortex/angular- recaptcha ）时遇到一些麻烦。 这是我的测试： 因此，您可以看到我正在尝试填充Recaptcha值，但我不知道如何进行。 你能帮助我吗 ？ 注意：我正在使用量角器 谢谢你的帮助 问题答案： 验证码已加载到中，
-
问题内容： 我将如何在表单中添加功能，以便用户可以通过单击“添加”来添加更多输入字段。这使用了角度正式库。 这是确切功能的示例，但仅使用angularjs完成。 动态添加表单字段 问题答案： 看到这个plnkr 这是您需要的示例。正如您在插件中看到的那样，可以通过单击按钮动态创建一个。单击按钮也可以删除创建的内容。 请参阅下面的 HTML 和 JS 将如下
-
本文向大家介绍ionic使用angularjs表单验证（模板验证），包括了ionic使用angularjs表单验证（模板验证）的使用技巧和注意事项，需要的朋友参考一下 1什么是模板验证 顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证，为了往模板驱动表单中添加验证机制，你要添加一些验证属性，就像原生的 HTML 表单验证器。 Angular 会用指令来匹配这些具有验证功能