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
model		Object	random
rules		Object (async-validator)
autofocus		Boolean	true		自動聚焦

bpa-form 方法

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

bpa-form-item 屬性

Name	Value	Type	Default	Required	Note
prop		String
label		String
labelFor		String
required		Boolean
error		Boolean
hint		String
rules		[Object, Array]
model		[Object, Array, Boolean, String, Number]

bpa-form-item 方法

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

Demo