詳細angular表單驗證例項
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>註冊</title> <link rel="stylesheet" href="style/bootstrap.min.css"> <link rel="stylesheet" href="style/css.css"> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/angular.min.js"></script> </head> <body ng-app="myApp"> <div class="container" ng-controller="formCtrl" style="margin-top: 80px;"> <h1 class="text-center" style="margin-bottom: 60px;">使用者註冊</h1> <form class="form-horizontal" name="myForm" novalidate> <div class="form-group"> <label class="col-sm-4 control-label">使用者名稱：</label> <div class="col-sm-4"> <input type="text" class="form-control" name="name" ng-model="user.name" ng-blur="selectName()" required> <span class="text-warning" ng-show="myForm.name.$error.required">必填</span> <span class="text-danger" ng-show="user.show&&myForm.name.$dirty">使用者名稱已存在</span> <span class="text-success" ng-show="myForm.name.$valid&&!user.show&&myForm.name.$touched">正確</span> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label">密碼：</label> <div class="col-sm-4"> <input type="password" class="form-control" name="pwd " ng-model="user.pwd" ng-minlength="4" ng-maxlength="20" required> <span class="text-warning" ng-show="myForm.pwd.$error.required">必填</span> <span class="text-danger" ng-show="myForm.pwd.$error.minlength">密碼至少4位</span> <span class="text-danger" ng-show="myForm.pwd.$error.maxlength">密碼最長20位</span> <span class="text-success" ng-show="myForm.pwd.$valid">正確</span> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label">密碼確認：</label> <div class="col-sm-4"> <input type="password" class="form-control" name="repwd" ng-model="user.pwd2" required> <span class="text-warning" ng-show="myForm.repwd.$error.required">必填</span> <span class="text-warning" ng-show="myForm.repwd.$valid&&user.pwd2!=user.pwd">兩次輸入不一致</span> <span class="text-success" ng-show="myForm.repwd.$valid&&user.pwd2==user.pwd">正確</span> </div> </div> <div class="form-group"> <label class="col-sm-4 control-label">手機號：</label> <div class="col-sm-4"> <input type="text" class="form-control" name="tel" ng-model="user.tel" ng-pattern="/^1[34578]\d{9}$/" required> <span class="text-warning" ng-show="myForm.tel.$error.required">必填</span> <span class="text-danger" ng-show="myForm.tel.$error.pattern">無效手機號</span> <span class="text-success" ng-show="myForm.tel.$valid">正確</span> </div> </div> <div class="form-group"> <label for="" class="col-sm-4 control-label">郵箱：</label> <div class="col-sm-4"> <input type="email" class="form-control" name="email" ng-model="user.email" required> <span class="text-warning" ng-show="myForm.email.$error.required">必填</span> <span class="text-danger" ng-show="myForm.email.$error.email">郵箱不合法</span> <span class="text-success" ng-show="myForm.email.$valid">正確</span> </div> </div> <div class="form-group"> <div class="col-sm-4 col-sm-offset-4"> <button type="submit" class="btn btn-success" style="width: 100%" ng-click="add()" ng-disabled="myForm.$invalid||user.pwd2!=user.pwd||user.show||myForm.$pristine">提交</button> </div> </div> </form> <div class="navbar-fixed-middle col-sm-2 block-center"><p class="bg-success" ng-bind="user.success"></p></div> </div> <script> var app = angular.module('myApp', []); //解決php接收不到問題，這塊要注意，angular的一個小坑 app.config(function($httpProvider) { $httpProvider.defaults.transformRequest = function(obj) { var str = []; for (var p in obj) { str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])); } return str.join("&"); }; $httpProvider.defaults.headers.post = { 'Content-Type': 'application/x-www-form-urlencoded' } }) // 表單資料提交給後臺 app.controller('formCtrl', function($scope, $http) { $scope.user = { name: "", pwd:"", pwd2:"", tel:"", email:"" } //檢測使用者名稱是否存在 $scope.selectName = function() { $http({ method: "post", url: "http://localhost/demo2/index.php/home/user/selectName", data: { name:$scope.user.name } }).then(function(res){ //後臺判斷資料庫是否存在使用者名稱，存在返回1，不存在返回0 $scope.user.show=res.data*1;//將string轉換成number型別，不然繫結到ng-show上一直為真，算是一個坑吧 }) } //向資料庫添加註冊資訊 $scope.add = function() { $http({ method: "post", url: "http://localhost/demo2/index.php/home/user/add", data: $scope.user }).then(function(res){ console.log(res.data) $scope.user.success=res.data;//後臺輸出“註冊成功” }) } }); </script> </body> </html>
實現後的效果圖：
當資料庫有時顯示使用者已存在，當不存在是顯示正確
後端部分程式碼，thinkphph框架寫的
案例中的一些小坑已在程式碼中註釋了，希望多家注意，由於自己也是剛剛自學，有什麼錯的地方還望指正，還有不懂php的同學可以嘗試用下thinkphp寫下後端驗證，因為我也沒學過php，感覺學angualr不會後端，學起來很痛苦，有沒什麼後端的朋友，所以就thinkphp和angular一起學了
相關推薦
詳細angular表單驗證例項
一個angular實現的表單驗證例子，包括使用者名稱已存在驗證，話不多說，看程式碼<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
ngVerify - 更高效的 angular 表單驗證
man script 模板 所有 ams 範圍 依賴 mail 驗證 ngVerify v1.5.0 a easy Angular Form Validation plugin.簡潔高效的__angular表單驗證插件__ See how powerful it.看看它有多
JavaScript正則表示式表單驗證例項
/*是否帶有小數*/ function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校驗是否中文名稱組成 */ function
php完整表單驗證例項
<!DOCTYPE HTML> <html> <head> <style> .error{color:#FF0000} </style> </head> <body> <?php $nameErr=$em
常用表單驗證例項
1. 長度限制<script>function test(){if(document.a.b.value.length>50){alert("不能超過50個字元！");document.a.b.focus();return false;}}</script><fo
Laravel表單驗證例項詳解
在專案下執行命令：php artisan make:request CreateProjectRequest(隨表起一個名字) (1)執行命令後，會生成一個檔案：app/Http/Requests/CreateProjectRequest.php 修改CreateProjectRequest.
angular表單驗證之表單巢狀
正常情況下我們的瀏覽器不支援兩層的表單巢狀，所以，angular提供了ng-form來讓我們達到這樣的目的，主要用於部分表單提交，同時進行表單驗證。 <from> <ng
angular 表單驗證 遇到問題總結
novalidate用在form標籤上，用來禁用 瀏覽器原生的表單校驗。 主要是樣式不夠美觀。 jquery外掛 用在 表單驗證裡，有時候選中的值不能對映到ngModel上。 可以通過在jquery選中的觸發的事件裡呼叫 ng
angular表單驗證，遠端驗證&&程式碼實現
定義驗證規則，驗證有效性 顯示驗證結果 禁用html5自帶驗證，novalidate=novalidate”“ 使用者輸入後，angular會依次呼叫驗證器進行驗證，全部成功時model會變成使用者輸
正則表示式表單驗證例項
/*是否帶有小數*/ function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校驗是否中文名稱組
Angular 表單驗證類庫 ngx-validator 1.0 正式釋出
背景介紹 之前寫了一篇 《如何優雅的使用 Angular 表單驗證》，結尾處介紹了統一驗證反饋的類庫 ngx-validator ，由於這段時間一直在新模組做微前端以及相關業務元件庫，工具等開發，一直拖到現在，目前正式版 1.0 終於
angular js h5關於表單驗證的例子
checked tro mis scrip att sta error 自定義 account angular js表單驗證 <!DOCTYPE html><html><head lang="en"> <meta charse
Angular Reactive Form-響應式表單驗證
規則 式表 length tps pla 示例 update require ont 內建驗證規則 Angular中提供了一些內建的Validators，這些驗證規則可以在Template-Driven或Reactive表單中使用。 目前 Angular 支持的內建 val
angular-簡單的表單驗證註冊demo
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="angular-1.3.0.js"></
用angular做表單驗證
先上圖 看到紅色箭頭所示，有注意兩點： 當文字框獲得焦點的時候，有一個box-shadow的效果 同時會有驗證 都知道input是單標籤（不閉合）的元素，為了實現這個效果，就需要用到div將input包圍起來，如下： <div ng-
表單驗證ASP.NET RequiredFieldValidator 控制元件使用方法及使用例項
例項 w3school例項： <html> <body> <form runat="server"> 名稱：<asp:TextBox id="name" runat="server" /> <br /> 年齡：<asp:TextBox id
純H5+c3實現表單驗證
mail ida 網址 put 滿足 字段 address ini css3 客戶端驗證是網頁客戶端程序最常用的功能之一，我們之前使用了各種各樣的js庫來進行表單的驗證。HTML5其實早已為我們提供了表單驗證的功能。至於為啥沒有流行起來估計是兼容性的問題還有就是樣式太醜陋了
表單驗證
java pwd word 用戶註冊 -1 style 字符 text date <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></
JaveWeb 公司項目（4）----- Easyui的表單驗證
過程 -- 目前 要求 今天 和數 希望 小項目 web 前面三篇博文講述的是界面的搭建和數據的傳輸，可以看出目前我做的這個小項目已經有了一個大體的雛形，剩下的就是細節部分的打磨和一些友好的人機交互設計，今天做的是表單的驗證，作為初學者，著實花了一番功夫，所以寫一篇博文將這
jQuery基礎（常用插件 表單驗證，圖片放大鏡，自定義對象級，jQuery UI，面板折疊）
此外 cookie值 添加圖標 tor 列表 需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則，即時顯示異常信息，此外，還允許自定義驗證規則，插件調用方法如下： $(form).vali