> 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

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 dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` 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 optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.