vue-vform-集成了jQuery验证和Axios的Vue.js 2表单组件。-Vue.js开发

  • a4_836627
    了解作者
  • 18.3KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-19 01:05
    上传日期
vue-vform Vue.js 2表单组件,集成了jQuery Validation和Axios。 安装Yarn yarn添加vue-vform --dev NPM npm安装vue-vform --save-vue-vform Vue.js 2表单组件,集成了jQuery Validation和Axios。 安装Yarn yarn添加vue-vform --dev NPM npm安装vue-vform --save-dev前提条件Vue.js 2 jQuery jQuery Validation Axios(如果要在验证后自动发送Ajax请求,则为可选)用法定义vform组件自定义组件中的标记。 例如,在您的custom-form-component.vue中:
vue-vform-master.zip
  • vue-vform-master
  • yarn.lock
    54.6KB
  • LICENSE.md
    1.1KB
  • README.md
    3.9KB
  • .gitignore
    28B
  • index.vue
    1.3KB
  • package.json
    1.3KB
  • .npmignore
    40B
  • .travis.yml
    246B
  • test.js
    0B
内容介绍
# vue-vform > [Vue.js 2](https://vuejs.org/) form component that integrates [jQuery Validation](https://github.com/jquery-validation/jquery-validation) and [Axios](https://github.com/mzabriskie/axios). ## Install [Yarn](https://yarnpkg.com/lang/en/) ```sh yarn add vue-vform --dev ``` [NPM](https://www.npmjs.com/) ```sh npm install vue-vform --save-dev ``` ## Prerequisites - [Vue.js 2](https://vuejs.org/) - [jQuery](https://github.com/jquery/jquery) - [jQuery Validation](https://github.com/jquery-validation/jquery-validation) - [Axios](https://github.com/mzabriskie/axios) (optional if you want to send (automatically) an Ajax request after validation) ## Usage Define `vform` component markup inside your custom component. For example in your `custom-form-component.vue`: ```html <template> <vform request :params="user" method="post" action="/api/v1/user/add" @validate="mySubmitCallback"> <!-- Your cool stuff --> <div class="form-group"> <label for="txtname">Name</label> <input name="txtname" v-model="user.name" required data-msg-required="Enter your name" type="text" class="form-control"> </div> <div class="form-group"> <label for="txtemail">E-mail</label> <input name="txtemail" v-model="user.email" required data-msg-required="Enter your E-mail" data-rule-email="true" data-msg-email="Enter a valid E-mail address" type="text" class="form-control"> </div> <!-- //Your cool stuff --> <button type="submit" class="btn btn-primary">Submit</button> </vform> </template> <script> export default { data () { return { user: { name: '', email: '' } } }, methods: { /** * Callback method when validation is completed. */ mySubmitCallback (promise) { promise .then(response => response.data) .then(data => console.log(data)) .catch(err => console.log(err.message)) } } } </script> ``` In your entry app: ```js const Vue = require('vue') // jQuery and jQuery Validation window.$ = window.jQuery = require('jquery') require('jquery-validation') // If you want auto form Ajax request (optional) window.axios = require('axios') Vue.component('vform', require('vue-vform')) Vue.component('custom-form-component', require('./components/custom-form-component')) const app = new Vue({ el: '#app' }) ``` ## Attributes #### method (optional) The request method (POST, PUT, DELETE, PATCH). For dynamic value use `v-bind:method="myMethod"` or `:method="myMethod"`. #### action (optional) The request URL. #### request (optional) If `request` (Boolean) attribute is defined `vform` performs an Ajax Request using __Axios__ and a __Promise object__ is passed to your callback. Make sure that you have [Axios](https://github.com/mzabriskie/axios) before. #### params (optional) The component data binding (usually `FormData` or plain object `{}` values) that it will send if `request` option was setted. (use `v-bind:param="mydata"` or `:param="mydata"` property) #### accept (optional) The request `Accept` header. Default: `application/json` ## Events #### @validate Event when validation is completed. You need to pass the callback defined in your `methods: ...`. A Promise object will be passed if `request` attribute was defined. ## Tip __Laravel v5.4 users__: It's necessary to define the [Axios](https://github.com/mzabriskie/axios) common headers in your `app.js` file. That's is useful when your use [Laravel v5.4](https://laravel.com/docs/5.4/) and [Passport](https://laravel.com/docs/5.4/passport). ```js axios.defaults.headers.common = { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': Laravel.csrfToken } ``` ## License MIT license © 2017 [José Luis Quintana](http://git.io/joseluisq)
评论
    相关推荐
    • iOS-Overlay-gh-pages.zi
      模仿苹果系统的UI风格 用来做ajax请求绝佳的选择
    • jquery upload ajax方式
      jquery实现的ajax upload图片和文件,喜欢的朋友拿去吧
    • vue-fetch-box:包装器组件,用于请求数据
      将其视为无需进行所有手动设置即可进行AJAX请求的简便方法。 非常适合需要从API端点获取数据的原型或小部件。 它只会处理普通的GET方法,考虑到如何使用它才有意义。 它在后台使用Axios。 这是一个不渲染的组件,...
    • 仿ios选择插件
      仿ios选择器插件,可以自定义修改选择逻辑,使用起来容易上手,适合于新手开发者。
    • 0719_react_project:0719班的react商品管理系统
      React项目每天任务表 day01任务: 1.使用create-react-app创建基于react脚手架应用(最好精简一下脚手架) 2.引入antd,完成按需引入,自定义...3.使用响应拦截器,统一处理所有ajax请求的错误 + 从axios返回对象中提
    • ajax文件异步上传工具
      基于jquery的文件异步上传工具,只要简单地配置就可以上传文件了,很实用的一个工具
    • HTTP-AJAX
      AJAX 承诺 指示 在该项目的根目录中运行yarn install or npm install 1运行yarn start or npm start启动服务器。 当对发出GET请求时,提供的服务器将返回朋友列表。 在一个单独的终端窗口中,运行yarn create ...
    • FileUpload ajax 异步文件上传 进度条
      企业级项目实例,功能包括用户登录、列表展示、消息推送、文件上传,包含技术有异步文件上传、文件包解压处理,进度表、servlet、ajax、jQuery等
    • jQuery的Ajax
      jQuery的Ajax
    • crudUsuarios_2020_ajax
      crudUsuarios_2020_ajax