AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证。手动验证所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件:1、给form元素加上novalidate="novalidate";2、给fo ...
AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证。● 给form加上novalidate="novalidate"意味着表单将不再使用HTML5验证特性在second.js文件中定义了module,controller以及提交表单的方法。
var myApp1 = angular.module('myApp1',[]);myApp1.controller('myCtrl1', function($scope, $http){ $scope.formModel = {}; $scope.onSubmit = function(){ $http.post('someurl',$scope.formModel) .success(function(data){ console.log(':)'); }) .error(function(data){ console.log(':('); }); console.log($scope.formModel); };});
自动验证
AngularJS的另外一种表单验证方式是自动验证,即通过directive来实现,除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module。● 安装:npm install angular-localize --save<script src='/images/loading.gif' data-original="../node_modules/angular-sanitize/angular-sanitize.min.js"></script>● 安装:bower install angular-ladda --save<script src='/images/loading.gif' data-original="../bower_components/ladda/dist/spin.min.js"></script>页面如下:
<!DOCTYPE html><html lang="en" ng-app="myApp1"><head> <meta charset="gb2312"> <title></title> <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css"/> <link rel="stylesheet" href="../bower_components/ladda/dist/ladda-themeless.min.css"/> <link rel="stylesheet" href="../css/main.css"/></head><body><nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <a href="http://www.cnblogs.com//" class="navbar-brand">Form Validating Auto</a> </div> </div></nav><div class="container main-content" ng-controller="myCtrl1"> <!--novalidate让表单不要使用html验证--> <!--theForm变成scope的一个字段--> <form ng-submit="onSubmit()" novalidate="novalidate"> <div class="form-group"> <label for="name" class="control-label">Name</label> <input type="text" class="form-control" id="name" ng-model="formModel.name" required="required"/> </div> <div class="form-group"> <label for="email" class="control-label">Email</label> <input type="email" class="form-control" id="email" ng-model="formModel.email" required="required"/> </div> <div class="form-group"> <label for="username" class="control-label">Username</label> <input type="text" class="form-control" id="username" ng-model="formModel.username" required="required" ng-pattern="/^[A-Za-z0-9_]{1,32}$/" ng-minlength="7" ng-pattern-err-type="badUsername" /> </div> <div class="form-group"> <label for="age" class="control-label">Age</label> <input type="number" class="form-control" id="age" ng-model="formModel.age" required="required" min="18" max="65" ng-min-err-type="tooYoung" ng-max-err-type="tooOld" /> </div> <div class="form-group"> <label for="sex" class="control-label">Sex</label> <select name="sex" id="sex" class="form-control" ng-model="formModel.sex" required="required"> <option value="">Please choose</option> <option value="male">Mail</option> <option value="femail">Femail</option> </select> </div> <div class="form-group"> <label for="password" class="control-label">Password</label> <input type="text" class="form-control" id="password" ng-model="formModel.password" required="required" ng-minlength="6"/> </div> <div class="form-group"> <!--<button ng-click="onSubmit()">Register</button>--> <button class="btn btn-primary" ladda = "submitting" data-style="expand-right" type="submit"> <span ng-show="submitting">正在注册...</span> <span ng-show="!submitting">注册</span> </button> </div> <pre> {{formModel | json}} </pre> </form></div><script src='/images/loading.gif' data-original="../node_modules/angular/angular.min.js"></script><script src='/images/loading.gif' data-original="form_validation_auto.js"></script><script src='/images/loading.gif' data-original="../node_modules/angular-auto-validate/dist/jcs-auto-validate.min.js"></script><script src='/images/loading.gif' data-original="../node_modules/angular-sanitize/angular-sanitize.min.js"></script><script src='/images/loading.gif' data-original="../node_modules/angular-localize/angular-localize.min.js"></script><script src='/images/loading.gif' data-original="../bower_components/ladda/dist/spin.min.js"></script><script src='/images/loading.gif' data-original="../bower_components/ladda/dist/ladda.min.js"></script><script src='/images/loading.gif' data-original="../bower_components/angular-ladda/dist/angular-ladda.min.js"></script></body></html>
再拿表单中的Age字段来说:
<div class="form-group"> <label for="age" class="control-label">Age</label> <input type="number" class="form-control" id="age" ng-model="formModel.age" required="required" min="18" max="65" ng-min-err-type="tooYoung" ng-max-err-type="tooOld" /></div>
原标题:AngularJS表单验证,手动验证或自动验证
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。