Form
介紹使用 Form 表單元件
Dropdown 下拉式選單,用在讓使用者針對選取的資料採取下一步互動。點擊按鈕會出現一個懸浮區域,裡面是一系列的選項,外觀與 Select 相似,但與 Select 最大的不同之處在於 Dropdown 點擊選項後觸發選項事件,並且關閉懸浮區域。
範例
<bpa-form
:model="exampleForm"
ref="refExampleForm"
:rules="exampleRules"
>
<bpa-form-item
label="姓名"
prop="name"
required
labelFor="thisIDIsMustTheSame"
@validate="onValidate"
>
<bpa-input
v-model="exampleForm.name"
id="thisIDIsMustTheSame"
/>
</bpa-form-item>
</bpa-form>
data() {
return {
exampleRules: {
name: [
{ required: true, message: 'name is required' },
{ min: 3, max: 5, message: 'at least 3 to 5 words', trigger: 'change' }
]
}
}
}
驗證
// 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<any>, 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
<fieldset class="bpa-fieldset">
<legend>Experience</legend>
<div class="bpa-fieldset-container">
<bpa-form-item
label="Company"
prop="company"
labelFor="testModelId2"
>
<bpa-input
v-model="exampleForm.company"
id="testModelId2"
/>
</bpa-form-item>
</div>
</fieldset>
bpa-form 屬性
Name
Value
Type
Default
Required
Note
bpa-form 方法
Function () : Promise({valid: booleaml; error: object})
bpa-form-item 屬性
Name
Value
Type
Default
Required
Note
bpa-form-item 方法
{ valid: boolean, message: string }
Demo