angularjs 表单校验指令_angularJs 表单验证指令

angularJs 前端验证指令

var rcSubmitDirective = {

'rcSubmit': function ($parse) {

return {

restrict: "A",

require: [ "rcSubmit", "?form" ],

controller: function() {

this.attempted = false;

var formController = null;

this.setAttempted = function() {

this.attempted = true;

};

this.setFormController = function(controller) {

formController = controller;

};

this.needsAttention = function(fieldModelController) {

if (!formController) return false;

if (fieldModelController) {

return fieldModelController.$invalid && (fieldModelController.$dirty || this.attempted);

} else {

return formController && formController.$invalid && (formController.$dirty || this.attempted);

}

};

},

compile: function() {

return {

pre: function(scope, formElement, attributes, controllers) {

var submitController = controllers[0];

var formController = controllers.length > 1 ? controllers[1] : null;

submitController.setFormController(formController);

scope.rc = scope.rc || {};

scope.rc[attributes.name] = submitController;

},

post: function(scope, formElement, attributes, controllers) {

var submitController = controllers[0];

var formController = controllers.length > 1 ? controllers[1] : null;

var fn = $parse(attributes.rcSubmit);

formElement.bind("submit", function(event) {

submitController.setAttempted();

if (!scope.$$phase) scope.$apply();

if (!formController.$valid) return;

scope.$apply(function() {

fn(scope, {

$event: event

});

});

});

}

};

}

};

}

};

验证通过

ng-app="LoginApp" ng-controller="LoginController" rc-submit="login()">

ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.username)}">

placeholder="Username" required ng-model="session.username" />

ng-show="rc.form.needsAttention(loginForm.username) && loginForm.username.$error.required">Required

ng-class="{'has-error': rc.loginForm.needsAttention(loginForm.password)}">

placeholder="Password" required ng-model="session.password" />

ng-show="rc.form.needsAttention(loginForm.password) && loginForm.password.$error.required">Required

value="Login" title="Login">

Login

样式如下

前端验证通过会调用login()