Angular Yii 表单的表单验证
Angular form validation on Yii Form
我在 Yii 动态表单中使用 AngularJS v1.3.15 进行表单验证,但似乎 angular 验证对输入名称有效。问题是输入的名称是数组格式,例如:name="LoginForm[username]"
。我在这里复制我的代码:
<div class="col-md-4 col-md-offset-4 m-t-lg" ng-app="validationApp" ng-controller="mainController">
<section class="panel">
<header class="panel-heading text-center"><strong>Admin Sign in </strong> </header>
<?php
$form=$this->beginWidget('CActiveForm', array(
'id'=>'formLogin',
'htmlOptions'=> array('name'=>'userForm', 'class'=>'panel-body', 'ng-submit'=>'submitForm($event)', 'novalidate'=>'true'),
'action'=>'#',
'enableAjaxValidation'=>false,
));
?>
<div class="form-group" ng-class="{'has-error' : userForm.username.$invalid && !userForm.username.$pristine}">
<label class="control-label">Email</label>
<?php echo $form->emailField($model, 'username', array('placeholder'=>'test@example.com', 'class'=>'form-control', 'ng-model'=>'user.username', 'ng-pattern'=>"/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", 'required'=>'true', 'id'=>'username')); ?>
<?php echo $form->error($model,'username'); ?>
</div>
<div class="form-group" ng-class="{'has-error' : userForm.password.$invalid && !userForm.password.$pristine}">
<label class="control-label">Password</label>
<input type="password" placeholder="Password" ng-minlength="6" class="form-control" name="password" ng-model="user.password" required>
</div>
<div class="checkbox">
<label> <input type="checkbox"> Keep me logged in
</label>
</div>
<button type="submit" class="btn btn-info" ng-disabled="userForm.$invalid">Sign in</button>
<?php $this->endwidget(); ?>
</section>
</div>
</div>
这里是 angular 控制器的脚本代码:
var app = angular.module('validationApp',[]);
app.controller('mainController', function($scope) {
$scope.submitForm = function($event){
if ($scope.userForm.$valid){
$scope.submit();
} else $event.preventDefault();
}
});
如果我将输入的名称更改为单个单词(例如 "username" 和 "password",它可以正常工作,但它在当前情况下无法使用名称 "LoginForm[username]"。它在密码字段中工作正常,因为它的普通名称与用户名字段不同。
查看这些链接:
似乎您必须在转义后分别验证每个字段。
AngularJS validation and field name with square brackets
https://github.com/angular/angular.js/issues/1201
validate input with name containing brackets in AngularJS
我在 Yii 动态表单中使用 AngularJS v1.3.15 进行表单验证,但似乎 angular 验证对输入名称有效。问题是输入的名称是数组格式,例如:name="LoginForm[username]"
。我在这里复制我的代码:
<div class="col-md-4 col-md-offset-4 m-t-lg" ng-app="validationApp" ng-controller="mainController">
<section class="panel">
<header class="panel-heading text-center"><strong>Admin Sign in </strong> </header>
<?php
$form=$this->beginWidget('CActiveForm', array(
'id'=>'formLogin',
'htmlOptions'=> array('name'=>'userForm', 'class'=>'panel-body', 'ng-submit'=>'submitForm($event)', 'novalidate'=>'true'),
'action'=>'#',
'enableAjaxValidation'=>false,
));
?>
<div class="form-group" ng-class="{'has-error' : userForm.username.$invalid && !userForm.username.$pristine}">
<label class="control-label">Email</label>
<?php echo $form->emailField($model, 'username', array('placeholder'=>'test@example.com', 'class'=>'form-control', 'ng-model'=>'user.username', 'ng-pattern'=>"/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/", 'required'=>'true', 'id'=>'username')); ?>
<?php echo $form->error($model,'username'); ?>
</div>
<div class="form-group" ng-class="{'has-error' : userForm.password.$invalid && !userForm.password.$pristine}">
<label class="control-label">Password</label>
<input type="password" placeholder="Password" ng-minlength="6" class="form-control" name="password" ng-model="user.password" required>
</div>
<div class="checkbox">
<label> <input type="checkbox"> Keep me logged in
</label>
</div>
<button type="submit" class="btn btn-info" ng-disabled="userForm.$invalid">Sign in</button>
<?php $this->endwidget(); ?>
</section>
</div>
</div>
这里是 angular 控制器的脚本代码:
var app = angular.module('validationApp',[]);
app.controller('mainController', function($scope) {
$scope.submitForm = function($event){
if ($scope.userForm.$valid){
$scope.submit();
} else $event.preventDefault();
}
});
如果我将输入的名称更改为单个单词(例如 "username" 和 "password",它可以正常工作,但它在当前情况下无法使用名称 "LoginForm[username]"。它在密码字段中工作正常,因为它的普通名称与用户名字段不同。
查看这些链接:
似乎您必须在转义后分别验证每个字段。
AngularJS validation and field name with square brackets
https://github.com/angular/angular.js/issues/1201
validate input with name containing brackets in AngularJS