在做網站的過程中,大多數情況下肯定會應用到表單,使用表單讓用戶輸入數據,收集相關信息,在這個過程中為了讓用戶輸入的信息可靠,就會使用前端的表單驗證。目前業(yè)內也有很多表單驗證工具,更有大多數人自已寫純js的表單驗證。這樣重復造輪子的事情大可不必一直做的,浪費時間和效率。這里介紹一款非常好用的前端表單驗證插件validate,做為一款國外的的表單插件,雖然表使用文檔都是英文,對國內的程序用戶看起來應該很吃力。不過網上仍有不少網友提供很多翻譯版本可供使用。使用也很簡,這里介紹一下基本的使用方法。
1、使用$('#formid').validate({})來包含整個驗證類信息,其中formid為表單的id識別符。
2、debug屬性可以設置為true,表示啟用調試信息。
3、rules屬性為規(guī)則json數組,常用的如:array('require'=>true,'min_length'=>10,'max_length'=>100,'email'=>true),這個分別表示
require為必填,min_length為最小長度為10個字符,max_length為最大長度為100個字符,email為必須是郵箱格式。還可以自定義規(guī)則使用jQuery.validator.addMethod('name',function(value, element){})增加新的規(guī)則,增加后,即可在驗證規(guī)則中使用。
4、messages為和規(guī)則對應的錯誤顯示信息,數組形式是一樣的,把鍵值修改成錯誤信息提示即可。
5、showErrors為當不符合驗證規(guī)則時如何顯示錯誤信息,一般是直接彈出信息提示用戶,當然也是可以在表單域上直接顯示錯誤信息的。
6、onkeyup為不驗證鍵盤輸入。
7、onfocusout為失去焦點時不驗證。
8、submitHandler為當驗證通過時,需要執(zhí)行的代碼塊,如使用ajax來提交信息后臺處理。
需要注意的是,驗證規(guī)則和錯誤信息文本數組要使用json數據的形式,避免出錯。
其中錯誤信息提示彈窗這里推薦使用彈窗插入layer,也是一款國人開發(fā)的非常好用的彈窗插件,可以配合表單驗證來做出更漂亮的交互效果。
下面是具體的驗證代碼形式。
作者:方維網絡嚴成
方維網絡專注于企業(yè)網站設計、品牌網站設計、響應式網站建設、商城系統(tǒng)開發(fā),也可以為提供前端制作和后臺程序開發(fā),也就是客戶提供設計稿,我們根據客戶的設計稿進行后續(xù)開發(fā),這種情況主要是當客戶公司有設計師的情況。