ajax綜合使用 · October Cms 筆記

# ajax綜合使用 ## ajax綜合使用 ### 表格驗證您可以`data-request-validate`在表單上指定屬性以啟用驗證功能。 ``` <form data-request="onSubmit" data-request-validate>  </form> ``` ### 引發驗證錯誤 - 后臺使用`ValidationException`拋出異常 - 其中第一個參數是數組。數組應使用字段名稱作為鍵，并使用錯誤消息作為值。 ``` function onSubmit() { throw new ValidationException(['name' => 'You must give a name!']); } ``` > **注意**：您還可以將[驗證服務](https://octobercms.com/docs/services/validation)的實例作為異常的第一個參數傳遞。 ### 顯示錯誤信息在表單內部，您可以使用`data-validate-error`容器元素上的屬性來顯示第一條錯誤消息。容器內的內容將設置為錯誤消息，并使該元素可見。 ``` <div data-validate-error></div> ``` 要顯示多個錯誤消息，請包含一個帶有`data-message`屬性的元素。在此示例中，段落標簽將被復制并為存在的每條消息設置內容。 ``` <div class="alert alert-danger" data-validate-error> <p data-message></p> </div> ``` 要添加有關AJAX失效的自定義類，請插入`ajaxInvalidField`和`ajaxPromise`JS事件。 ``` $(window).on('ajaxInvalidField', function(event, fieldElement, fieldName, errorMsg, isFirst) { $(fieldElement).closest('.form-group').addClass('has-error'); }); $(document).on('ajaxPromise', '[data-request]', function() { $(this).closest('form').find('.form-group.has-error').removeClass('has-error'); }); ``` ### 顯示字段錯誤另外，您可以通過定義使用`data-validate-for`屬性的元素（將字段名稱作為值傳遞）來顯示各個字段的驗證消息。 ```  <input name="phone" />  <div data-validate-for="phone"></div> ``` 如果該元素保留為空，則將使用服務器中的驗證文本填充該元素。否則，您可以指定任何您喜歡的文本，它將顯示出來。 ``` <div data-validate-for="phone"> Oops.. phone number is invalid! </div> ``` ### 加載按鈕當任何元素包含該`data-attach-loading`屬性時，`oc-loading`將在AJAX請求期間向其添加CSS類。此類將使用CSS選擇*器*在按鈕和錨點元素上生成\*加載微調`*:after`器。 ``` <form data-request="onSubmit"> <button data-attach-loading> Submit </button> </form> <a href="#" data-request="onDoSomething" data-attach-loading> Do something </a> ``` ### 即時消息 `data-request-flash`在表單上指定屬性，以在成功的AJAX請求中啟用Flash消息。 ``` <form data-request="onSuccess" data-request-flash>  </form> ``` 結合`Flash`在事件處理程序中使用Facade，在請求完成后將出現一條Flash消息。 ``` function onSuccess() { Flash::success('You did it!'); } ``` 為了與基于AJAX的Flash消息保持一致，可以通過在頁面或布局中放置此代碼來在頁面加載時呈現[標準Flash消息](https://octobercms.com/docs/markup/tag-flash)。 ``` {% flash %} <p data-control="flash-message" class="flash-message fade {{ type }}" data-interval="5"> {{ message }} </p> {% endflash %} ``` ### 使用范例以下是表單驗證的完整示例。它調用`onDoSomething`事件處理程序，該事件處理程序將觸發加載提交按鈕，在表單字段上執行驗證，然后顯示成功的Flash消息。 ``` <form data-request="onDoSomething" data-request-validate data-request-flash> <div> <input name="name" /> <span data-validate-for="name"></span> </div> <div> <input name="email" /> <span data-validate-for="email"></span> </div> <button data-attach-loading> Submit </button> <div class="alert alert-danger" data-validate-error> <p data-message></p> </div> </form> ``` AJAX事件處理程序查看客戶端發送的POST數據，并將一些規則應用于驗證器。如果驗證失敗，`ValidationException`則拋出a，否則`Flash::success`返回一條消息。 ``` function onDoSomething() { $data = post(); $rules = [ 'name' => 'required', 'email' => 'required|email', ]; $validation = Validator::make($data, $rules); if ($validation->fails()) { throw new ValidationException($validation); } Flash::success('Jobs done!'); } ```