表單驗證消息

Question

我在尋找類似這些例子的形式驗證：

或

這是自定義的JavaFX組件或者這可以使用標準的JavaFX來完成？

是否有任何示例我如何創建類似於這些的表單驗證器？

Answer 1

只是爲了給您一個啓程，這裏是一個小例子，使用ContextMenu。可能是ContextMenu對於這種情況不是理想的控制，你可以用Label,Text等自由替換它。保持TextField和Label位於HBox（最初隱藏標籤）和HBox到GridPane之內。或者，您可以一起使用任何其他方法！

您可以使用CSS設計驗證消息/控件！

我想補充（可能是你意識到這一點）：

功能，這取決於你，當你要觸發驗證和應您的驗證條件是什麼 。在我的示例中，我正在檢查空的Textfields，並且我已觸發驗證點擊的登錄按鈕。您可以觸發驗證，在類似的情況下或刪除焦點從任何TextField或其他情況！

有很多方法可以幫助您尋找什麼，並且javafx在UI控件和設計上如此豐富，完全取決於您的創造力！

ValidationDemo.java

import javafx.application.Application; 
import javafx.beans.value.ChangeListener; 
import javafx.beans.value.ObservableValue; 
import javafx.event.ActionEvent; 
import javafx.event.EventHandler; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 
import javafx.geometry.Side; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.control.ContextMenu; 
import javafx.scene.control.Label; 
import javafx.scene.control.MenuItem; 
import javafx.scene.control.PasswordField; 
import javafx.scene.control.TextField; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.GridPane; 
import javafx.scene.layout.HBox; 
import javafx.scene.paint.Color; 
import javafx.scene.text.Font; 
import javafx.scene.text.FontWeight; 
import javafx.scene.text.Text; 
import javafx.stage.Stage; 

public class ValidationDemo extends Application { 

    @Override 
    public void start(Stage stage) throws Exception { 
     stage.setTitle("Validation Demo"); 
     BorderPane borderPane = new BorderPane(); 

     borderPane.setCenter(loadLoginScreen()); 
     Scene scene = new Scene(borderPane, 700, 500); 
     scene.getStylesheets().add(
       ValidationDemo.class.getResource("context.css") 
         .toExternalForm()); 
     stage.setScene(scene); 
     stage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 

    private GridPane loadLoginScreen() { 

     GridPane grid = new GridPane(); 
     grid.setAlignment(Pos.CENTER); 
     grid.setHgap(10); 
     grid.setVgap(10); 
     grid.setPadding(new Insets(25, 25, 25, 25)); 

     Text scenetitle = new Text("Welcome"); 
     scenetitle.setFont(Font.font("Tahoma", FontWeight.NORMAL, 20)); 
     grid.add(scenetitle, 0, 0, 2, 1); 

     Label userName = new Label("User Name:"); 
     grid.add(userName, 0, 1); 

     final TextField userTextField = new TextField(); 
     grid.add(userTextField, 1, 1); 

     Label pw = new Label("Password:"); 
     grid.add(pw, 0, 2); 

     final PasswordField pwBox = new PasswordField(); 
     grid.add(pwBox, 1, 2); 

     Button btn = new Button("Sign in"); 
     HBox hbBtn = new HBox(10); 
     hbBtn.setAlignment(Pos.BOTTOM_RIGHT); 
     hbBtn.getChildren().add(btn); 
     grid.add(hbBtn, 1, 4); 

     final Text actiontarget = new Text(); 
     grid.add(actiontarget, 1, 6); 

     // Context Menu for error messages 
     final ContextMenu usernameValidator = new ContextMenu(); 
     usernameValidator.setAutoHide(false); 
     final ContextMenu passValidator = new ContextMenu(); 
     passValidator.setAutoHide(false); 

     // Action on button press 
     btn.setOnAction(new EventHandler<ActionEvent>() { 

      @Override 
      public void handle(ActionEvent e) { 
       // Clearing message if any 
       actiontarget.setText(""); 

       // Checking if the userTextField is empty 
       if (userTextField.getText().equals("")) { 
        usernameValidator.getItems().clear(); 
        usernameValidator.getItems().add(
          new MenuItem("Please enter username")); 
        usernameValidator.show(userTextField, Side.RIGHT, 10, 0); 
       } 
       // Checking if the pwBox is empty 
       if (pwBox.getText().equals("")) { 
        passValidator.getItems().clear(); 
        passValidator.getItems().add(
          new MenuItem("Please enter Password")); 
        passValidator.show(pwBox, Side.RIGHT, 10, 0); 
       } 
       // If both of the above textFields have values 
       if (!pwBox.getText().equals("") 
         && !userTextField.getText().equals("")) { 
        actiontarget.setFill(Color.GREEN); 
        actiontarget.setText("Welcome"); 
       } 
      } 
     }); 

     userTextField.focusedProperty().addListener(
       new ChangeListener<Boolean>() { 
        @Override 
        public void changed(
          ObservableValue<? extends Boolean> arg0, 
          Boolean oldPropertyValue, Boolean newPropertyValue) { 
         if (newPropertyValue) { 
          // Clearing message if any 
          actiontarget.setText(""); 
          // Hiding the error message 
          usernameValidator.hide(); 
         } 
        } 
       }); 

     pwBox.focusedProperty().addListener(new ChangeListener<Boolean>() { 
      @Override 
      public void changed(ObservableValue<? extends Boolean> arg0, 
        Boolean oldPropertyValue, Boolean newPropertyValue) { 
       if (newPropertyValue) { 
        // Clearing message if any 
        actiontarget.setText(""); 
        // Hiding the error message 
        passValidator.hide(); 
       } 
      } 
     }); 
     return grid; 
    } 

} 

context.css

.root { 
    -fx-background-color: cornsilk; 
    -fx-padding: 10; 
} 

.context-menu { 
    -fx-background-color: #006699; 
    -fx-text-fill: white; 
    -fx-padding: 0; 
} 

.context-menu:hover { 
    -fx-background-color: #006699; 
    -fx-text-fill: white; 
} 

.menu-item .label { 
    -fx-text-fill: white; 
} 

.menu-item:focused .label { 
    -fx-text-fill: white; 
}