Quasar 中對input控制項輸入的內容驗證

內部驗證

在quasar中使用q-input控制項進行內部驗證的時候我們可以使用:rulegs屬性來驗證qinput元件。

指定嵌入式規則陣列或您自己的驗證器。 您的自定義驗證器將是乙個函式，如果驗證器成功，

它將返回true，否則將返回帶有錯誤訊息的string。

自定義規則：value => condition || errormessage

value => value.

includes
('hello')||
'field must contain word hello'

="q-pa-md" style=
"max-width: 300px"
>
ref=
"input"
filled
v-model=
"model"
:rules=
"[val => !!val || 'field is required']"
/>
<
/div>
<
/template>

"time" mask=

"##:##:##" fill-mask
:rules=
"[val => !!val || '* required',val => isvalidruntime ]" lazy-rules
error-message=
"時間格式不正確"
/>

export
default},
computed:
else
}else},
}}<
/script>

qinput rules屬性有輔助器如：「date」、「time」、「hexcolor」、「rgborrgbacolor」、「anycolor」）或寫出指定您的自定義需求的字串。

"input"  lazy-rules mask=

"date"
:rules=
"['date']"
>

外部驗證

還可以使用外部驗證，並且僅傳遞error和error-message（啟用bottom-slots以顯示此錯誤訊息）。

"input" filledv-model=

"model" label=
"type here" bottom-slots hint=
"max 3 characters" error-message=
"please use maximum 3 characters"
:error=
"!isvalid"
/>

export
default},
computed:}}
<
/script>

input控制項

type屬性值 描述text 單行文字 password 密碼radio 單選checkbox 多選bottom 普通按鈕 不推薦使用 與bottom標籤功能類似 submit 提交按鈕 reset 重置按鈕 image 形式提交按鈕 file 檔案域email 郵箱tel 手機號number 數字...

文字框控制項（Input）

用來輸入文字，除了name屬性是必要的，其他引數可選。相關屬性 title，該輸入框的標題。type，預設值為text，如選擇password，則輸入的資料顯示為 name，指定了用來儲存該輸入文字的變數名字。value，與select的相同屬性很相似，name用於儲存變數資料，value用於提供預...

font size 對 input 的影響

1.開始 在不限定寬度的情況下，font size是會影響的寬度的。以下的試驗是在 macos 的 chrome 中進行的。預設情況下的寬度是 132px，font size的值為12px。當我們以12px為界，先減小font size的值，這時候會發現無論是的寬度，還是輸入裡面的字元大小，都是是不...