pref: 处理新增加用户验证方式

src/main/webapp/resources/js/sso/controllers/staffManagementCtrl.js

@@ -9,7 +9,6 @@ define(['app/app'], function (app) {
         document.title = '员工管理-帐户中心';
         $scope.tab = 'auth';
         $scope.addingUser = false;
-        $scope.userEmailSuccess = true;
         $scope.setAddingUser = function (status) {
             $scope.addingUser = status;
             $scope.adding = false;
@@ -17,6 +16,12 @@ define(['app/app'], function (app) {
             $scope.newUser.userName = '';
             $scope.newUser.userTel = '';
             $scope.newUser.userEmail = '';
+            $scope.userTelSuccess = false;
+            $scope.userEmailSuccess = false;
+            $scope.userNameSuccess = false;
+            $scope.userTelError = false;
+            $scope.userNameError = false;
+            $scope.userEmailError = false;
         };
         $scope.userInfo = $rootScope.userInfo;
         $scope.updateState = false;
@@ -246,9 +251,15 @@ define(['app/app'], function (app) {
          */
         $scope.addUser = function () {
             if (!$scope.newUser.userName) {
+                $scope.userNameError = true;
                 toaster.pop('error', '请输入用户名信息');
                 return;
             }
+            if (!$scope.newUser.userTel) {
+                $scope.userTelError = true;
+                toaster.pop('error', '请输入用户手机号码');
+                return;
+            }
             if (!$scope.userTelSuccess || !$scope.userEmailSuccess) {
                 toaster.pop('error', '请输入正确的信息后提交');
                 return;
@@ -263,11 +274,6 @@ define(['app/app'], function (app) {
                 $scope.tableParams.page(1);
                 $scope.tableParams.reload();
                 $scope.adding = false;
-                // $scope.newUserForm.newUser.userTel.$setValidity('available', false);
-                // $scope.newUserForm.newUserEmail.$setValidity('available', false);
-                $scope.userTelSuccess = false;
-                $scope.userEmailSuccess = true;
-                $scope.userTelError = false;
             }, function (response) {
                 $scope.loading = false;
                 toaster.pop('error', '错误', response.data);
@@ -337,42 +343,93 @@ define(['app/app'], function (app) {
          */
         $scope.telValid = function (tel) {
             if (tel) {
-                $http.get('basic/user/telEnable', {
-                    params: {
-                        tel: tel
-                    }
-                }).success(function (data) {
-                    data = eval(data);
-                    if (data == true) {
-                        // $scope.newUserForm.newUserTel.$setValidity('available', true);
-                        $scope.userTelSuccess = true;
-                        $scope.userTelError = false;
-                    } else {
-                        // $scope.newUserForm.newUserTel.$setValidity('available', false);
-                        $scope.userTelError = true;
+                if(/^1\d{10}$/.test(tel)) {
+                    $http.get('basic/user/telEnable', {
+                        params: {
+                            tel: tel
+                        }
+                    }).success(function (data) {
+                        data = eval(data);
+                        if (data == true) {
+                            $scope.userTelSuccess = true;
+                            $scope.userTelError = false;
+                        } else {
+                            $scope.userTelError = true;
+                            $scope.userTelSuccess = false;
+                            if (tel.length == 11)
+                                toaster.pop('error', '错误', '手机号 ' + tel + ' 已被注册');
+                        }
+                    }).error(function () {
                         $scope.userTelSuccess = false;
-                        if (tel.length == 11)
-                            toaster.pop('error', '错误', '手机号 ' + tel + ' 已被注册');
-                    }
-                }).error(function () {
+                        $scope.userTelError = true;
+                    });
+                } else {
                     $scope.userTelSuccess = false;
                     $scope.userTelError = true;
-                });
+                }
             } else {
                 $scope.userTelSuccess = false;
                 $scope.userTelError = false;
             }
         };
 
+        $scope.nameValid = function (name) {
+            if (name) {
+                $scope.userNameError = false;
+                $scope.userNameSuccess = true;
+            } else {
+                $scope.userNameError = false;
+                $scope.userNameSuccess = false;
+            }
+        };
+
+        $scope.telValidChange = function (tel) {
+            if(!tel) {
+                $scope.userTelSuccess = false;
+                $scope.userTelError = false;
+            } else {
+                if(/^1\d{10}$/.test(tel)) {
+                    $scope.userTelError = false;
+                    $scope.userTelSuccess = true;
+                } else {
+                    $scope.userTelError = true;
+                    $scope.userTelSuccess = false;
+                }
+            }
+        };
+
+        $scope.emailValidChange = function (email) {
+            if(!email) {
+                $scope.userEmailSuccess = false;
+                $scope.userEmailError = false;
+            } else {
+                var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
+                if(reg.test(email)) {
+                    $scope.userEmailError = false;
+                    $scope.userEmailSuccess = true;
+                } else {
+                    $scope.userEmailError = true;
+                    $scope.userEmailSuccess = false;
+                }
+            }
+        };
+
         /**
          * 验证邮箱是否可用
          */
         $scope.emailValid = function (email) {
             var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
             if (email) {
-                reg.test(email) ? $scope.userEmailSuccess = true : $scope.userEmailSuccess = false;
+                if(reg.test(email)) {
+                    $scope.userEmailSuccess = true;
+                    $scope.userEmailError = false;
+                } else {
+                    $scope.userEmailSuccess = false;
+                    $scope.userEmailError =  true;
+                }
             } else {
-                $scope.userEmailSuccess = true;
+                $scope.userEmailSuccess = false;
+                $scope.userEmailError = false;
             }
             // if (email) {
             //     $http.get('basic/user/emailEnable', {

src/main/webapp/resources/view/sso/staffManagement.html

@@ -22,7 +22,7 @@
   }
 
   .user-role > .role-item > .icon.warning {
-    color: #8a6d3b;
+    color: #8a6d3b; n
     border: 1px solid #8a6d3b;
   }
 
@@ -776,6 +776,13 @@
   .white {
     background-color: white;
   }
+    .auth-info-area .has-error{
+      border:1px solid red!important;
+  }
+    .auth-info-area .has-success{
+        border:1px solid #00a1dc!important;
+    }
+
 </style>
 
 <style>
@@ -928,7 +935,6 @@
                 </div>
             </div>
             <div class="auth-info-area">
-                <form name="newUserForm"></form>
                 <table class="role-info" ng-table="tableParams">
                     <thead>
                     <tr>
@@ -958,26 +964,35 @@
                         </td>-->
                         <!--<td>系统生成</td>-->
                         <td>
-                            <input type="text" ng-model="newUser.userName" required placeholder="用户名">
+                            <input type="text"
+                                   ng-class="{'has-error': userNameError, 'has-success': userNameSuccess}"
+                                   ng-blur="nameValid(newUser.userName)"
+                                   ng-model="newUser.userName"
+                                   placeholder="用户名">
                         </td>
                         <!--<td>-->
-                            <!--<select ng-model="newUser.userSex" ng-init="newUser.userSex='M'" >-->
-                                <!--<option value="M">男</option>-->
-                                <!--<option value="F">女</option>-->
-                            <!--</select>-->
+                        <!--<select ng-model="newUser.userSex" ng-init="newUser.userSex='M'" >-->
+                        <!--<option value="M">男</option>-->
+                        <!--<option value="F">女</option>-->
+                        <!--</select>-->
                         <!--</td>-->
-                        <td ng-class="{'has-error': userTelError, 'has-success': userTelSuccess}">
+                        <td>
                             <input ng-model="newUser.userTel"
+                                   ng-class="{'has-error': userTelError, 'has-success': userTelSuccess}"
                                    autocomplete="off"
-                                   ng-blur="telValid(newUser.userTel)" required name="newUserTel"
-                                   ng-pattern="/^1\d{10}$/" type="text" placeholder="手机">
+                                   ng-blur="telValid(newUser.userTel)" name="newUserTel"
+                                   ng-change="telValidChange(newUser.userTel)"
+                                   type="text" placeholder="手机">
                         </td>
-                        <td ng-class="{'has-error': userEmailError, 'has-success': userEmailSuccess}">
-                            <input ng-model="newUser.userEmail" ng-pattern="/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/"
+                        <td>
+                            <input ng-model="newUser.userEmail"
+                                   ng-class="{'has-error': userEmailError, 'has-success': userEmailSuccess}"
                                    ng-blur="emailValid(newUser.userEmail)"
+                                   ng-change="emailValidChange(newUser.userEmail)"
                                    autocomplete="off"
                                    name="newUserEmail" type="text"
                                    placeholder="邮箱">
+
                         </td>
                         <td class="role-tag-area">
                             <span class="role-tag bgcolor-5">普</span>
@@ -987,7 +1002,7 @@
                         </td>
                         <td class="submit-area">
                             <span ng-click="setAddingUser(false)" >取消</span>
-                            <span ng-click="addUser(newUser)">确定</span>
+                            <span ng-click="addUser(newUserForm)">确定</span>
                         </td>
                     </tr>
                     <tr ng-repeat="user in users track by $index">