Activity 2: Add Form Validation with HTML Built-in Attributes
本页目录· 10 条
- 2.1 打开 Form.vue，在输入字段 “Username” 上添加第一个验证 —— 使用 required 属性，如下所示：
- 2.2 回到浏览器，再次点击 Submit 按钮，页面显示如下：
- 2.3 接着，在 “Password” 输入字段上添加另外一个验证 —— 使用 minlength 和 maxlength 属性，如下所示：
- 2.4 回到浏览器，在 Username 输入框中输入任意值，在 Password 输入框中输入 "123"，然后点击 Submit 按钮，页面显示如下：
- 2.5 尝试为其余输入字段添加验证，包括“是否为澳大利亚居民？”、 “性别” 和 “加入原因”。
- Username
- Password
- Australian Resident?
- Gender
- Reason for joining
2.1 打开 Form.vue，在输入字段 “Username” 上添加第一个验证 —— 使用 required 属性，如下所示：
2.2 回到浏览器，再次点击 Submit 按钮，页面显示如下：
现在我们可以看到表单下没有显示卡片，因为它要求“用户名”字段不能为空。
2.3 接着，在 “Password” 输入字段上添加另外一个验证 —— 使用 minlength 和 maxlength 属性，如下所示：
2.4 回到浏览器，在 Username 输入框中输入任意值，在 Password 输入框中输入 "123"，然后点击 Submit 按钮，页面显示如下：
由于我们输入的密码少于 4 位数字 ，因此表单阻止提交并显示错误消息通知用户。
2.5 尝试为其余输入字段添加验证，包括“是否为澳大利亚居民？”、 “性别” 和 “加入原因”。
初始化isAustralian 为null