當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

angularjs的表单验证

發布時間：2023/12/20 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 angularjs的表单验证小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

angularjs的表單驗證

廢話：angular的熱度在減小，但是老項目依舊是angular的，就是不能丟，得會

干活直接上代碼　　<!DOCTYPE html>

<html> <head><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /><style>body { padding-top:30px; }button {background-color: #4CAF50;border: none;color: white;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;border-radius: 5px;}button:hover {background-color: rgb(113, 173, 115);}button:focus {background: rgb(156, 207, 156);outline: none;}button[disabled] {background: rgb(116, 119, 116)}</style><script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script><script>var validationApp = angular.module('validationApp', []);validationApp.controller('mainController', function($scope) {$scope.submitForm = function(isValid) {if (isValid) {$('URL'，data，function(result){
　　　　　　　　　　　　　　　　....
　　　　　　　　　　　　})
　　　　　　　　　　　　return false}};});</script> </head> <body ng-app="validationApp" ng-controller="mainController"> <div class="container"><div class="page-header"><h1>AngularJS Form Validation</h1></div><form name="userForm" novalidate><div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid}"><label>Name*</label><input type="text" name="name" class="form-control" ng-model="Sname" ng-pattern="/ab{2,}/" required><p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">要的是abb</p></div><div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$pristine }"><label>Username</label><input type="text" name="username" class="form-control" ng-model="Susername" ng-minlength="3" ng-maxlength="8" required><p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p><p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p></div><div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$pristine }"><label>Email</label><input type="email" name="email" class="form-control" ng-model="Demail" required><p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p></div><button type="button" class="btn btn-primary" ng-disabled="userForm.$invalid" ng-click="submitForm(userForm.$valid)">Submit</button>
</form>
</div>
</body>
</html>

　　注意：這里是表單提交如果上述紅色部分不寫或者是 type=“submit“ 在提交頁面的時候，我們需要的ajax的效果沒辦法展示，會直接刷新。

　　　　　　處理用 button的類型，也可以在 ajax 提交的代碼中最后 return false?

對于angularjs 的解釋：

　　ng 指令綁定表單，上面的藍色部分都是必不可少的;

　　novalidate ,禁止使用表單的默認提交，采用我們ajax的提交方式
userForm 必需的表單name 后面要綁定到這個form name 屬性
　 ng-pattern="/ab{2,}/" 可以單獨為 input 的表單做正則驗證，如果不正確就會觸發下面的ng-show 　 ng-show="userForm.name.$invalid && !userForm.name.$pristine" 錯誤信息的展示條件

　　<input type="text" name="name" class="form-control" ng-model="Sname" ng-pattern="/ab{2,}/" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">要的是abb</p>ng 是通過name 屬性關聯起來的，input 里面的name 和對應表單里面的格式驗證 name 要一致；
name="name" 必須的input 的那么屬性　　
ng-model="Sname" 必須要的model 不然綁定不到　，可以不和name的名字一致
　所有的input 都有required的屬性表示表單必填　　　
ng-disabled="userForm.$invalid" 表示按鈕的是否點擊狀態取決于表單是否都已經填寫　
　

　　 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>button {background: green;width: 100px;height: 20px;}button[disabled] {background: rgb(116, 119, 116)}</style> </head> <body ng-app="validationApp" ng-controller="mainController"><script src="https://cdn.bootcss.com/jquery/1.12.2/jquery.js"></script><script src="https://cdn.bootcss.com/angular.js/1.5.5/angular.js"></script><script>var validationApp = angular.module('validationApp', []);validationApp.controller('mainController', function($scope) {console.log(regForm.phone.$pristine)$scope.submitForm = function(isValid) {console.log(111);$scope.regForm.already = true;if (isValid) {console.log($scope.rphone)console.log($scope.rsmg)console.log($scope.rpwd)return false}};});</script><div><h3>注冊</h3><form name="regForm" novalidate><div><label>正確的手機號</label><input type="text" name="phone" ng-model="rphone" ng-pattern="/[0-9]{11}/" required /><p ng-show="regForm.phone.$invalid && !regForm.phone.$pristine">請輸入正確的手機號</p><p ng-show="regForm.already">手機已經注冊</p></div><div><label>請輸入4手機code</label><input type="text" name="smg" ng-model="rsmg" ng-pattern="/[0-9]{4}/" required /><p ng-show="regForm.smg.$invalid && !regForm.smg.$pristine">請輸入4手機code</p></div><div><label>11pwd</label><input type="text" name="pwd" ng-model="rpwd" ng-pattern="/[0-9]{6,11}/" required /><p ng-show="regForm.pwd.$invalid && !regForm.pwd.$pristine">請輸入6-11pwd</p></div><button type="button" ng-disabled="regForm.$invalid" ng-click="submitForm(regForm.$valid)">Submit</button> </form></div></body> </html>

轉載于:https://www.cnblogs.com/adouwt/p/9450554.html

總結

以上是生活随笔為你收集整理的angularjs的表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。