diff --git a/UI/datacheck.py b/UI/datacheck.py
new file mode 100644
index 0000000..b9d5a20
--- /dev/null
+++ b/UI/datacheck.py
@@ -0,0 +1,12 @@
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField
+from wtforms.validators import InputRequired, Length, Regexp
+class LoginForm(FlaskForm):
+    username = StringField('Username', validators=[
+        InputRequired(message='Username is required.'),
+        Regexp(r'^[a-zA-Z][a-zA-Z0-9_]{0,19}$', message='Invalid username format.')
+    ])
+    password = PasswordField('Password', validators=[
+        InputRequired(message='Password is required.'),
+        Length(min=1, max=30, message='Password must be between 1 and 30 characters long.')
+    ])
\ No newline at end of file
diff --git a/UI/main.py b/UI/main.py
index 78a175c..04a3e95 100644
--- a/UI/main.py
+++ b/UI/main.py
@@ -9,6 +9,7 @@ from dotenv import load_dotenv
 import time
 import socket
 import utils
+from datacheck import *
 
 # Load environment variables from .env file
 load_dotenv()
@@ -66,9 +67,10 @@ def about():
 
 @app.route('/login', methods=['GET', 'POST'])
 def login():
-    if request.method == 'POST':
-        username = request.form['username']
-        password = request.form['password']
+    form = LoginForm()
+    if form.validate_on_submit():
+        username = form.username.data
+        password = form.password.data
         
         # 调用 ExecCommand 执行登录命令
         login_response = ExecCommand(f'login -u {username} -p {password}')
@@ -81,9 +83,10 @@ def login():
         else:
             error = 'An unknown error occurred.'
         
-        return render_template('login.html', error=error)
+        flash(error, 'error')
+        return redirect(url_for('login'))
     
-    return render_template('login.html')
+    return render_template('login.html', form=form)
 
 @app.before_request
 def before_request():
diff --git a/UI/templates/base.html b/UI/templates/base.html
index 44cb2f4..623b42f 100644
--- a/UI/templates/base.html
+++ b/UI/templates/base.html
@@ -46,5 +46,6 @@
     </div>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </body>
 </html>
diff --git a/UI/templates/login.html b/UI/templates/login.html
index add3cba..7690815 100644
--- a/UI/templates/login.html
+++ b/UI/templates/login.html
@@ -6,22 +6,62 @@
 <div class="row justify-content-center">
     <div class="col-md-6">
         <h2 class="text-center">Login</h2>
-        {% if error %}
-        <div class="alert alert-danger" role="alert">
-            {{ error }}
-        </div>
-        {% endif %}
-        <form method="POST" action="/login">
+        <form id="loginForm" class="needs-validation" novalidate method="POST" action="/login">
+            {{ form.hidden_tag() }}
             <div class="form-group">
                 <label for="username">Username</label>
-                <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" required>
+                <input type="text" class="form-control" id="username" name="username" placeholder="Enter your username" pattern="^[a-zA-Z][a-zA-Z0-9_]{0,19}$" required>
+                <div class="invalid-feedback">
+                    Username must start with a letter and can only contain letters, numbers, and underscores (max 20 characters).
+                </div>
             </div>
             <div class="form-group">
                 <label for="password">Password</label>
-                <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" required>
+                <input type="password" class="form-control" id="password" name="password" placeholder="Enter your password" minlength="1" maxlength="30" required>
+                <div class="invalid-feedback">
+                    Password must be between 1 and 30 characters long.
+                </div>
             </div>
             <button type="submit" class="btn btn-primary btn-block">Login</button>
         </form>
     </div>
 </div>
+
+<script>
+    // JavaScript for form validation
+    document.addEventListener('DOMContentLoaded', function() {
+        const loginForm = document.getElementById('loginForm');
+        loginForm.addEventListener('submit', function(event) {
+            if (!loginForm.checkValidity()) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            loginForm.classList.add('was-validated');
+        });
+
+        // Real-time validation for username
+        const usernameInput = document.getElementById('username');
+        usernameInput.addEventListener('input', function() {
+            if (usernameInput.checkValidity()) {
+                usernameInput.classList.remove('is-invalid');
+                usernameInput.classList.add('is-valid');
+            } else {
+                usernameInput.classList.remove('is-valid');
+                usernameInput.classList.add('is-invalid');
+            }
+        });
+
+        // Real-time validation for password
+        const passwordInput = document.getElementById('password');
+        passwordInput.addEventListener('input', function() {
+            if (passwordInput.checkValidity()) {
+                passwordInput.classList.remove('is-invalid');
+                passwordInput.classList.add('is-valid');
+            } else {
+                passwordInput.classList.remove('is-valid');
+                passwordInput.classList.add('is-invalid');
+            }
+        });
+    });
+</script>
 {% endblock %}
\ No newline at end of file