能說明

1.提交網(wǎng)站并驗證網(wǎng)站歸屬后即可使用站長工具。

2.建議您驗證所有需要進行分析的子域名，以便更充分地使用站長工具。

驗證方法

一、文件驗證

1、下載驗證文件

2、添加到進行驗證的網(wǎng)站域名（如：www.toutiao.com）根目錄下。

3、驗證成功后的站點，請不要刪除刪除HTML文件。

二、驗證校驗

添加完成后可以點擊這里進行驗證是否添加成功，如果添加成功能夠正常打開，不能打開需要重新確定。

三、觀察狀態(tài)

1、驗證通過

驗證成功的站點會在后臺正常展示

2、驗證失敗

若網(wǎng)站驗證失敗，請檢查是否為以下原因：

• 未正確配置驗證文件；

• 爬蟲無法訪問網(wǎng)站，請確認網(wǎng)站狀態(tài)已經(jīng)是否封禁爬蟲。

• 已有相同域名的網(wǎng)站通過驗證。

• 對網(wǎng)站驗證有其他問題？可以向zhanzhang@bytedance.com提交反饋，我們會及時處理。

單校驗是注冊環(huán)節(jié)中必不可少的操作，表單校驗可以提醒用戶填寫數(shù)據(jù)規(guī)則以確保用戶提交數(shù)據(jù)的效性，也可以防止用戶因誤操作、填寫錯誤數(shù)據(jù)或者惡意提交數(shù)據(jù)而占用服務(wù)器資源。

ElementUI校驗規(guī)則

ElementUI封裝了組件el-form來收集、校驗和提交數(shù)據(jù)，其中的rules屬性就是用來做數(shù)據(jù)校驗的。ElementUI提供了一些常用的表單驗證規(guī)則，我們可以直接使用該規(guī)則來實現(xiàn)數(shù)據(jù)校驗。rules根據(jù)rules給出的規(guī)則會對prop中的值進行校驗，當不滿足要求時會彈出message相應(yīng)的提示信息。

自定義規(guī)則調(diào)用

但是ElementUI提供的表單驗證規(guī)則是有限的，可能無法滿足我們項目的需求這時候就需要我們來自定義驗證規(guī)則。我們在在data() {}中添加自定義的校驗規(guī)則，然后在在data的return中通過validator引用校驗規(guī)則。data() {return{}}中定義的rules要 <el-form> 中的 :rules 屬性值相同，rules中的對象userName要與與 <el-form-item> 中的prop屬性值相同。

自定義校驗規(guī)則

validate是ElementUI封裝用于對整個表單進行驗證的，參數(shù)是一個回調(diào)函數(shù)。該回調(diào)函數(shù)在校驗結(jié)束后被調(diào)用，是否校驗成功和未通過校驗的字段。這個回調(diào)函數(shù)的原型為：function fun(rule, value, callback, source, options){}，其中rule指向當前的規(guī)則對象，value是需要進行校驗的值，callback是驗證之后的執(zhí)行回調(diào)，source是跟value的值一致的鍵值對象（可以忽略），options是個額外的配置選項（可選）。所以常見的函數(shù)定義如下，校驗手機號碼是否正確。

validate校驗

自定義校驗方法是一個在校驗結(jié)束后才會被調(diào)用回調(diào)函數(shù)，所以在提交表單的時候我們需要通過$refs來調(diào)用validate來繼續(xù)自定義校驗。自定義校驗規(guī)則時必須保證每個分支都調(diào)用了callback方法，否則會導(dǎo)致el-form組件在使用validate方法時無法進入回調(diào)函數(shù)。調(diào)用validate()校驗時需要prop屬性綁定校驗的字段名，否則無法校驗v-model中綁定的值。

常用校驗規(guī)則

為了方便我們還是定義一個validation.js文件來專門定義常用的校驗方法，具體的JS文件定義和引用方法可以參考文章【Vue實戰(zhàn)083：幾種常用的外部JS文件定義和引用方法詳解 】。這里注意自定義rules時外層的message高于callback中的錯誤提示，所以自定義規(guī)則時建議外層勿定義message，可以用兩個規(guī)則來校驗內(nèi)容。定義好之后在需要用到的地方直接 import 引入，然后在 rules 校驗中加入即可。

總結(jié)：

以上內(nèi)容是小編給大家分享的【Vue實戰(zhàn)084：自定義表單校驗規(guī)則及常用表單校驗分享】，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。更多Vue實戰(zhàn)技巧可以參考以下專欄：

為了方便學(xué)習(xí)，下面附上本文用到的源碼：