很久之前有個客戶定制了一個ERP系統,里面有個單位的必填項,是沒有任何規律的字符串,也就是只需要做必填即可,結果前段時間維護該信息的換了一個人,必填的單位居然是空白,因為數據缺失的原因導致后面一系列的工作流一個都提交不了,該員工意識到自己闖禍后直接跑路,聯系不上,后經過我們排查發現是輸入了空格,因為當時客戶趕時間只做了前端校驗,后端接口就直接通過操作了,所以這里還是強烈建議前端+后端數據校驗才是安全的,當然如果是客戶這邊給到的費用不夠或者趕時間那就把后端校驗的功能閹割掉,然后必填項這里使用如下方法就不會輸入空格就能通過校驗了
首先我們需要知道的是其實空格也同樣算是一個字符。同樣的空格那么肯定是會通過校驗的,那么我們如何去實現不讓其首尾輸入空格呢?
方案一:
使用v-model.trim修飾符,這樣就會自動過濾掉首尾空白字符,如果采用trim修飾符的話,確實可以實現功能,但是這個時候首尾都不能輸入空格就會導致一個問題,當我們從左到右輸入文字的時候,如果需要輸入的字符串中間包含空格,就會無法實現,會遇到不能輸入的問題,我們只能輸入完成之后再去將鼠標光標放置在字符串中間部分輸入空格,這樣肯定是不利于我們輸入的。
方案二:
采用pattern,手寫正則的方式實現功能。我們只需要在我們對應的rules數組對象校驗中新增這樣一個正則寫法即可。
rules:{
code: [{ required: true, pattern: '[^ \x20]+', trigger: 'change', message: '驗證碼不能為空' }],
}</