Angular表单的本地校验和远程校验
AngularJS Form 进阶：远程校验和自定义输入项
表单远程校验
HTML代码：
doctype html>
<html ng-app="form-example1"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"><script src="../angular-1.0.3/angular.js">script><script src="FormValidation.js">script>head><body><div><form name="myForm" class="css-form" novalidate><div>整数(0-10):<input type="number" ng-model="size" name="size" min="0" max="10" integer/>{{size}}<br/><span ng-show="myForm.size.$error.integer">不是合法的整数！span><span ng-show="myForm.size.$error.min || myForm.size.$error.max">数值必须位于0到10之间！span>div><div>浮点数:<input type="text" ng-model="length" name="length" smart-float />{{length}}<br/><span ng-show="myForm.length.$error.float">不是合法的浮点数！span>div><div>远程校验:<input type="text" ng-model="remote" name="remote" remote-validation />{{remote}}<br/><span ng-show="myForm.remote.$error.remote">非法数据！span>div>form>div>body>
html> JS代码：
var app = angular.module('form-example1', []); var INTEGER_REGEXP = /^\-?\d*$/; app.directive('integer', function() {return {require : 'ngModel',link : function(scope, elm, attrs, ctrl) {ctrl.$parsers.unshift(function(viewValue) {if (INTEGER_REGEXP.test(viewValue)) {ctrl.$setValidity('integer', true);return viewValue;} else {ctrl.$setValidity('integer', false);return undefined;}});}}; });var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/; app.directive('smartFloat', function() {return {require : 'ngModel',link : function(scope, elm, attrs, ctrl) {ctrl.$parsers.unshift(function(viewValue) {if (FLOAT_REGEXP.test(viewValue)) {ctrl.$setValidity('float', true);return parseFloat(viewValue.replace(',','.'));} else {ctrl.$setValidity('float', false);return undefined;}});}}; });app.directive('remoteValidation', function($http) {return {require : 'ngModel',link : function(scope, elm, attrs, ctrl) {elm.bind('keyup', function() {$http({method: 'GET', url: 'FormValidation.jsp'}).success(function(data, status, headers, config) {if(parseInt(data)==0){ctrl.$setValidity('remote',true);}else{ctrl.$setValidity('remote',false);}}).error(function(data, status, headers, config) {ctrl.$setValidity('remote', false);});});}}; });
转载于:https://www.cnblogs.com/gongshunkai/p/6752450.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！