> For the complete documentation index, see [llms.txt](https://bpio.gitbook.io/piman/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bpio.gitbook.io/piman/vue2/form.md). # Form 介紹使用 Form 表單元件

Dropdown 下拉式選單，用在讓使用者針對選取的資料採取下一步互動。點擊按鈕會出現一個懸浮區域，裡面是一系列的選項，外觀與 Select 相似，但與 Select 最大的不同之處在於 Dropdown 點擊選項後觸發選項事件，並且關閉懸浮區域。 ### 範例 ```html

``` ```javascript data() { return { exampleRules: { name: [ { required: true, message: 'name is required' }, { min: 3, max: 5, message: 'at least 3 to 5 words', trigger: 'change' } ] } } } ``` ### 驗證 ```javascript // required const rules = { input:[{ required: true, message: '此欄位必填', trigger: 'blur' }] } // multiple const rules = { check:[{ required: true, type:'array', message: 'please check', trigger: 'change' }] } // multiple const rules = { check:[{ required: true, type:'array', message: 'please check', trigger: 'change' }] } // max and min const rules = { check:[{ min:0, max: 3, type:'array', message: 'please check(max 3)', trigger: 'change' }] } // password const form = { password:'', confirm:'' } const validatePsw = (rule: Array, value: string, callback: (par?: any)=>{}) => { if (value !== form.password) { let msg = 'Not Match!' callback(new Error(msg)); } else { callback(); } } const rules = { confirm:[ { required: true, validator: validatePsw, trigger:'blur'} ], } // regular express const rules = { password:[ { pattern: /(?=.{12,})((?=.*\d)(?=.*[a-z])(?=.*[A-Z])|(?=.*\d)(?=.*[a-zA-Z])(?=.*[\W_])|(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_])).*/, trigger: 'blur' } ], }ja ``` ### Fieldset ```html

Experience

``` ### bpa-form 屬性

Name	Type	Default	Required	Note
model	Object	random	false
rules	Object (async-validator)		false
autofocus	Boolean	true	false	自動聚焦

### bpa-form 方法

Name	Parameters
validate	Function () : Promise({valid: booleaml; error: object})

### bpa-form-item 屬性

Name	Type	Required
prop	String	false
label	String	true
labelFor	String	false
required	Boolean	false
error	Boolean	false
hint	String	false
rules	[Object, Array]	false
model	[Object, Array, Boolean, String, Number]	false

### bpa-form-item 方法

Name	Parameters	Note
validate	{ valid: boolean, message: string }

### Demo {% embed url="" fullWidth="false" %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://bpio.gitbook.io/piman/vue2/form.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.