angularJs form

form.name.$valid是否有效

form.name.$invalid 是否无效

form.name.$error错误的集合

  form.name.$error.required 

  form.name.$error.email 

控制submit按钮是否disabled 启用ng-disabled="form.$invalid"

 

下面是验证是否用户名唯一的简单写法

DOCTYPE html><html>
<head><title>title><script src="angular.min.js" type="text/javascript">script>
head>
<body ng-app="formTest" ng-controller="formController"><form name="myForm" ng-submit="show()"><input name="personName" required ng-model="person.name" ensure-Unique="personName"/><span>span><input type="submit" ng-disabled="myForm.$invalid"/>form><script>var formTest = angular.module("formTest", []);formTest.controller("formController", function ($scope) {$scope.person = {email: "",name: "Jackey"};$scope.show = function () {//alert($scope.person.name);
                console.log(myForm.personName.$error)};}).directive("ensureUnique", function ($http) {return {require: "ngModel",link: function (scope, element, attrs) {scope.$watch(attrs.ngModel, function () {
              //$http.....console.log(scope.person.name);element.next(
"span").text(scope.person.name);//显示是否存在唯一 });}};});script> body> html>

 再修改一下

DOCTYPE html><html>
<head><title>title><script src="angular.min.js" type="text/javascript">script>
head>
<body ng-app="formTest" ng-controller="formController"><form name="myForm" ng-submit="show()"><input name="personName" required ng-model="person.name" ensure-Unique="personName"/><span>span><input type="submit" ng-disabled="myForm.$invalid"/>form><script>var formTest = angular.module("formTest", []);formTest.controller("formController", function ($scope) {$scope.person = {email: "",name: ""};$scope.show = function () {//alert($scope.person.name);
                console.log(myForm.personName.$error)};}).directive("ensureUnique", function () {return {require: "ngModel",link: function (scope, element, attrs) {scope.$watch(attrs.ngModel, function (n) {if (!n) return;console.log(n);element.next("span").text(scope.person.name); //显示是否存在唯一
                    });}};});script>
body>
html>

 

转载于:https://www.cnblogs.com/lihaozhou/p/3674957.html


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部