前端页面基本实现表单验证功能

docs/todo.md

@@ -45,7 +45,7 @@
 - [x] 日志实现简短字段及详情字段，详情字段用text，存储完整的日志文本。因为日志太长，无法在简短日志字段存放完整。
 - [x] 修改密码功能
 - [x] 密码[找回|重置]功能
-- [ ] 前端页面校验字段有效值
+- [x] 前端页面校验字段有效值
 - [x] 加入手动清除已经离线的宿主机功能
 - [x] 显示计算节点离线时间
 - [x] 系统模板加入是否为Windows类系统的标记

templates/change_password.html

@@ -40,6 +40,36 @@
                     }
                 });
             });
+
+            $('#change_password_form').formValidation({
+                framework: 'bootstrap4',
+                icon: {
+                    valid: 'fa fa-check',
+                    invalid: 'fa fa-times',
+                    validating: 'fa fa-refresh'
+                },
+                // Since the Bootstrap Button hides the radio and checkbox
+                // We exclude the disabled elements only
+                excluded: ':disabled',
+                locale: 'zh_CN',
+                fields: {
+                    password: {
+                        validators: {
+                            notEmpty: {
+                            },
+                            stringLength: {
+                                min: 6,
+                                max: 128
+                            }
+                        }
+                    }
+                }
+            })
+                .on('success.field.fv', function(e, data) {
+                    if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
+                        data.fv.disableSubmitButtons(true);
+                    }
+                });
         });
     </script>
     <div class="panel">
@@ -48,7 +78,7 @@
                 修改密码
             </h3>
             <div class="example-box-wrapper">
-                <form id="change_password_form" class="form-horizontal bordered-row">
+                <form id="change_password_form" class="form-horizontal bordered-row" action="javascript:;">
                     <div class="form-group">
                         <label class="col-sm-2 control-label">当前密码</label>
                         <div class="col-sm-3">
@@ -64,7 +94,7 @@
                     <div class="form-group">
                         <label class="col-sm-2 control-label"></label>
                         <div class="col-sm-3 pull-right">
-                            <button id="submit_button" type="button" class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;">确定</button>
+                            <button id="submit_button" type="submit" class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;" disabled>确定</button>
                         </div>
                     </div>
                 </form>

templates/guest_create.html

@@ -76,6 +76,8 @@
                 },
                 password: {
                     validators: {
+                        notEmpty: {
+                        },
                         identical: {
                             field: 'confirm_password'
                         },

templates/recover_password.html

@@ -40,12 +40,42 @@
             $('.add-transition').attr('class', 'add-transition');
             $('.add-transition').addClass(transAttr);
         });
+
+        $('#recover_password_form').formValidation({
+            framework: 'bootstrap4',
+            icon: {
+                valid: 'fa fa-check',
+                invalid: 'fa fa-times',
+                validating: 'fa fa-refresh'
+            },
+            // Since the Bootstrap Button hides the radio and checkbox
+            // We exclude the disabled elements only
+            excluded: ':disabled',
+            locale: 'zh_CN',
+            fields: {
+                login_name: {
+                    validators: {
+                        notEmpty: {
+                        },
+                        stringLength: {
+                            min: 5,
+                            max: 128
+                        }
+                    }
+                }
+            }
+        })
+        .on('success.field.fv', function(e, data) {
+            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
+                data.fv.disableSubmitButtons(true);
+            }
+        })
     });
 
 </script>
 <div class="center-vertical">
     <div class="center-content row wow">
-        <form id="login_form" class="col-md-4 col-sm-5 col-xs-11 col-lg-3 center-margin" action="/recover_password" method="post">
+        <form id="recover_password_form" class="col-md-4 col-sm-5 col-xs-11 col-lg-3 center-margin" action="/recover_password" method="post">
             <h3 class="text-center pad25B font-primary" style="font-family: 'serif'; opacity: 0.83; font-size: -webkit-xxx-large;">找回密码</h3>
             <div id="login-form" class="content-box bg-default">
                 <div class="content-box-wrapper pad20A">
@@ -58,7 +88,7 @@
                         </div>
                     </div>
                     <div class="form-group" style="margin-bottom: 10px;">
-                        <button id="login_submit" class="btn btn-block btn-primary">下一步</button>
+                        <button type="submit" id="login_submit" class="btn btn-block btn-primary">下一步</button>
                     </div>
                 </div>
             </div>

templates/reset_password.html

@@ -40,12 +40,42 @@
             $('.add-transition').attr('class', 'add-transition');
             $('.add-transition').addClass(transAttr);
         });
+
+        $('#reset_password_form').formValidation({
+            framework: 'bootstrap4',
+            icon: {
+                valid: 'fa fa-check',
+                invalid: 'fa fa-times',
+                validating: 'fa fa-refresh'
+            },
+            // Since the Bootstrap Button hides the radio and checkbox
+            // We exclude the disabled elements only
+            excluded: ':disabled',
+            locale: 'zh_CN',
+            fields: {
+                password: {
+                    validators: {
+                        notEmpty: {
+                        },
+                        stringLength: {
+                            min: 6,
+                            max: 128
+                        }
+                    }
+                }
+            }
+        })
+        .on('success.field.fv', function(e, data) {
+            if (data.fv.getInvalidFields().length > 0) {    // There is invalid field
+                data.fv.disableSubmitButtons(true);
+            }
+        })
     });
 
 </script>
 <div class="center-vertical">
     <div class="center-content row wow">
-        <form id="login_form" class="col-md-4 col-sm-5 col-xs-11 col-lg-3 center-margin" action="/reset_password/{{ token }}" method="post">
+        <form id="reset_password_form" class="col-md-4 col-sm-5 col-xs-11 col-lg-3 center-margin" action="/reset_password/{{ token }}" method="post">
             <h3 class="text-center pad25B font-primary" style="font-family: 'serif'; opacity: 0.83; font-size: -webkit-xxx-large;">设置新密码</h3>
             <div id="login-form" class="content-box bg-default">
                 <div class="content-box-wrapper pad20A">
@@ -58,7 +88,7 @@
                         </div>
                     </div>
                     <div class="form-group" style="margin-bottom: 10px;">
-                        <button id="login_submit" class="btn btn-block btn-primary">下一步</button>
+                        <button type="submit" id="login_submit" class="btn btn-block btn-primary" disabled>下一步</button>
                     </div>
                 </div>
             </div>