メインコンテンツにスキップ

Customize the sign-up form

This guide explains how to build the sign-up form of an application with the Signup items table.


Learning outcomes​

  • Add, remove, and order the fields of the sign-up form.
  • Make fields required and validate them with regular expressions.
  • Change the behavior of fields with rules.

What you need​


About the sign-up items​

Each row of Signup items is one field or element of the sign-up page. Applications that you create through the Casdoor SDK get default items: ID, Username, Display name, Password, Confirm password, Email, Phone, and Agreement.

Signup items table of an application

Columns​

Column値説明
名前—Name of the signup item.
表示True / FalseShow or hide on the registration page.
必須True / FalseWhether the field is mandatory.
プロンプトTrue / FalseWhether to prompt the user if they leave it empty.
正規表現—Optional regex for client-side validation.
ラベル—For items starting with Text, use HTML for the field; otherwise replaces the item label.
カスタム CSS—CSS for this signup item.
ルールRule itemsRule that customizes this item (see table below).
アクション—Move up, move down, or delete.

Configure the form​

  1. In the Casdoor admin console, open the edit page of the application.
  2. In Signup items, add, remove, and order the items, and set Visible and Required for each one.
  3. Set a rule for the items that support one. See Item rules.
  4. Save the application.

For example, to show an email field that doesn't need verification, add the Email item and set its rule to No verification.

Signup items configured with an email field without verification

The sign-up page then looks like this:

Sign-up page with an email field

Item rules​

アイテムルール説明
IDRandom / IncrementalUser ID generation: random or incremental.
表示名None / Real name / First, lastHow to show the display name; First, last shows first and last name separately.
メールNormal / No verificationNormal = require email verification; No verification = skip verification.
同意None / Signin / Signin (Default True)Terms of use: none, require confirmation, or default to confirmed.
言語None / LabelAdds a language selector to the sign-up page. None = show the selector on its own; Label = show it with a text label.

Let users choose a tag​

The Tag item adds a list from which users pick their own tag at sign-up. It is hidden by default. Turn on Visible to show it.

  • The options come from the Options of the item. If the item has no options, they come from the Tags of the application.
  • A tag that the user selects takes precedence over the Default tag of the application, which applies only when the user selects none.

Validate input with a regular expression​

  1. In the row of the item, set Regex to a pattern, for example ^[a-zA-Z0-9_]+$ for usernames of letters, digits, and underscores.
  2. Save the application.

The sign-up page shows an error before submission when the input doesn't match. Validation works for Username, Display name, First name, Last name, Affiliation, and custom fields.

Use the email address as username​

If the organization has Use Email as username turned on and the Username item is hidden, the email address of the user becomes the username. See Organizations.

See also​