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!'); } ```