1. 程式人生 > >表單驗證的設計

表單驗證的設計

解決方案 正則 wan 光有 做了 我只 cnblogs 提示 重要

  不說廢話,直接留幹貨。實現的效果:多條表單提交的時候,如果某個表單的輸入不和格式要求,則提示對應的錯誤信息,所有表單的內容合適,則提交到後臺。顯示代碼(這裏的dom的結構不唯一,我只是在我實際的項目中,遇到的解決方案)

  dom:

  技術分享

  css:

  技術分享

  js:

  技術分享

  顯示的效果:

  全部格式不對:

技術分享

  部分不對:

技術分享

  驗證為空後繼續驗證是否符合電話格式(這裏只做了這個具體的驗證,也可以做郵箱的驗證,就要單獨寫正則驗證郵箱)

技術分享

總結:這樣做的好處就是,在提交表單的時候,如果某條表單格式不對,可以立馬顯示出對應表單,不用一條一條的驗證,或者,嵌套驗證(驗證完第一個後,在繼續在這段代碼驗證第二個),以前是這樣做的,一來嵌套麻煩,二來這裏的bug頗多,不同的輸入方式,你還有做不同的判斷,幾乎是累死人的驗證。

每日一句:

It’s not about how badly you want something. It’s about what you are capable of!

翻譯:

光有誌向是不夠的,重要的是你的能力。 —《瘋狂動物城》

  

表單驗證的設計