ele表單驗證的數字的坑

2021-09-11 23:43:23 字數 1491 閱讀 7770

ele支援表單驗證,對於數字的驗證,是這樣的

:rules="addrules"

ref="addtemp"

:model="addtemp" >

label="里程:"

prop="mileagestart">

v-model.number="addtemp.mileagestart"

placeholder="請輸入里程範圍最小值">

el-input>

el-form-item>

el-form>

複製**

addrules: 

]}複製**

坑一 要注意數字的驗證需要寫v-model.number,才會起作用

坑二 出現的問題是,可以輸入數字開頭的任意字串(比如1dede), 於是我加了個 type="number",也就是

type="number"

v-model.number="addtemp.mileagestart"

placeholder="請輸入里程範圍最小值">

el-input>

複製**

這就不能輸入非數字,但是e可以,他會轉化成3個0,這不用管了。

但是產品才不會讓你這麼輕鬆,比如需要保留小數點後2位。那就用自定義的表單驗證吧。

:rules="addrules"

ref="addtemp"

:model="addtemp" >

label="里程:"

prop="mileagestart">

v-model.number="addtemp.mileagestart"

placeholder="請輸入里程範圍最小值">

el-input>

el-form-item>

el-form>

複製**

// 保留2位小數的驗證

var checknumber = (rule, value, callback) => |0)(\.\d)?$/

value = '' + value

if (isnan(value) || !(num2.test(value))) else

}addrules:

]}複製**

這裡的num2在console上可以測試,

坑三 需要num2.test(字串)才會有效果,

num2.test(數字)的反應很奇怪,不能正常進行驗證

因為一開始驗證4.這個數字是通過的,於是我就加了value = '' + value,轉化成了字串,還是驗證通過,

按照這個正規表示式不應該通過呀

坑四 我就列印這個value,發現輸入的4.到這裡會變成4,那就是v-model.number和type="number"幹的好事了,因為都用正則驗證了,這裡的number自然是不需要了,就去掉,然後這才ok

element表單驗證規則遇到的坑

一 首先是你需要為那幾個輸入框或者其他新增限制規則,你就要設定幾個規則並且命名最好和你繫結的值的關鍵字一樣 二 然後就是prop需要繫結在el form item上,如果el input外層還有多個el form item,必須寫在父級的標籤上,不然規則不會成功 自己看看結構例如 執法人員2 cla...

iview表單驗證數字

驗證輸入字串必須為數字 html formitem label 兌換積分 prop exchangeintegral input v model formspecadd.exchangeintegral placeholder 請輸入兌換積分 style width 250px input form...

easyui表單的驗證

擴充套件easyui表單的驗證 extend fn.validatebox.defaults.rules,message 只允許漢字 英文本母 數字及下劃線 減號和 chs length character else else message easy 的多重驗證 1 2 return true 不...