表单验证插件

components/register/PersonalRegistration.vue

@@ -5,31 +5,36 @@
         <div class="content-top">
           <h3>个人注册</h3>
         </div>
-        <form action="">
+        <form action="" @submit.prevent="validateBeforeSubmit">
           <div class="form-group">
-            <input type="text" class="form-control" placeholder="会员名" />
+            <input type="text" name="vipName"
+                   v-validate="'required|vipName'"
+                   :class="{'input': true, 'is-danger': errors.has('name') }"
+                   v-model="item.vipName" class="form-control" placeholder="会员名" />
+            <i v-show="errors.has('vipName')" class="fa fa-warning"></i>
+            <span v-show="errors.has('vipName')" class="help is-danger">{{errors.first('vipName')}}</span>
           </div>
           <div class="form-group">
-            <input type="text" class="form-control" placeholder="登录密码" />
-            <i class="fa fa-keyboard-o" aria-hidden="true"></i>
+            <input type="password" class="form-control" placeholder="登录密码" v-model="item.password" />
+            <!--<i class="fa fa-keyboard-o" aria-hidden="true"></i>-->
             <!--<div class="pwd sm">密码强度 <em></em><em></em><em></em><span>弱</span></div>-->
             <!--<div class="pwd md">密码强度 <em></em><em></em><em></em><span>中</span></div>-->
             <div class="pwd lar">密码强度 <em></em><em></em><em></em><span>强</span></div>
           </div>
           <div class="form-group">
-            <input type="text" class="form-control" placeholder="密码确认" />
-            <i class="fa fa-keyboard-o" aria-hidden="true"></i>
+            <input type="password" class="form-control" placeholder="密码确认" v-model="item.confirm"/>
+            <!--<i class="fa fa-keyboard-o" aria-hidden="true"></i>-->
           </div>
           <div class="form-group">
-            <input type="text" class="form-control" placeholder="手机号码"/>
+            <input type="text" class="form-control" placeholder="手机号码" v-model="item.mobile"/>
             <span class="tip">单个手机号只能注册一个用户</span>
           </div>
           <div class="form-group">
-            <input type="text" class="form-control msg" placeholder="短信验证码"/>
+            <input type="text" class="form-control msg" placeholder="短信验证码" v-model="item.code"/>
             <span class="msg">获取验证码</span>
             <!--<span class="msg send">已发送(54s)</span>-->
           </div>
-          <button class="btn">完成注册</button>
+          <a class="submitBtn"  @click="registerNow(true, $event)" type="submit">完成注册</a>
           <div class="form-group agree">
             <input type="checkbox"/>
             <span class="agree">我已阅读并同意 <a href="">《优软云服务条款》</a></span>
@@ -43,7 +48,43 @@
 
 <script>
   export default {
-    name: 'PersonalRegistration'
+    name: 'PersonalRegistration',
+    data () {
+      return {
+        item: {
+          vipName: '',
+          password: '',
+          confirm: '',
+          mobile: ''
+        }
+      }
+    },
+    methods: {
+      validateBeforeSubmit () {
+        this.$validator.validateAll().then((result) => {
+          if (result) {
+            // eslint-disable-next-line
+            alert('From Submitted!')
+            return
+          }
+          alert('Correct them errors!')
+        })
+      },
+      registerNow: function (isRegister, event) {
+        event.stopPropagation()
+        if (isRegister) {
+          this.$http.post('/sso/personal/register', [{
+            vipName: this.item.vipName,
+            password: this.item.password,
+            mobile: this.item.mobile,
+            mobileArea: this.item.mobileArea,
+            appId: this.item.appId,
+            code: this.item.code,
+            token: this.item.token
+          }])
+        }
+      }
+    }
   }
 </script>
 <style lang="scss" scoped>
@@ -91,7 +132,7 @@
               color: #000;
               border-radius: 0;
             }
-            i{
+            i.fa{
               position: absolute;
               top: 10px;
               right: 18px;
@@ -196,11 +237,12 @@
           .form-group.agree{
             margin: 20px auto 0 !important;
           }
-          .btn {
+          .submitBtn {
+            display: inline-block;
             margin-top: 34px;
             width: 360px;
             height: 44px;
-            line-height: 4px;
+            line-height: 44px;
             font-size: 16px;
             color: #fff;
             background: #0076AD;

nuxt.config.js

@@ -1,6 +1,6 @@
 const path = require('path')
 const isProdMode = Object.is(process.env.NODE_ENV, 'production')
-const baseUrl = process.env.BASE_URL || (isProdMode ? 'https://city-service.ubtob.com' : 'http://192.168.253.66:8081/')
+const baseUrl = process.env.BASE_URL || (isProdMode ? 'https://city-service.ubtob.com' : 'http://192.168.253.66:8000/')
 
 module.exports = {
   router: {
@@ -54,7 +54,9 @@ module.exports = {
     },
     vendor: [
       'axios',
-      'element-ui'
+      'element-ui',
+      'vuerify',
+      'vee-validate'
     ],
     babel: {
       presets: ['es2015', 'stage-2'],
@@ -88,7 +90,13 @@ module.exports = {
   }, {
     src: '~plugins/jsonp.js',
     ssr: false
+  }, {
+    src: '~plugins/vuerify.js',
+    ssr: false
+  }, {
+    src: '~plugins/vee-validate.js',
+    ssr: false
   }],
   /* TODO 暂时代理到商城测试版，之后再做出调整 */
-  proxyTable: ['/api/**', '/login/**', '/user**', '/logout**']
+  proxyTable: ['/api/**', '/login/**', '/user**', '/logout**', '/sso/**']
 }

package.json

@@ -16,8 +16,11 @@
     "http-proxy-middleware": "^0.17.4",
     "jsonp": "^0.2.1",
     "nuxt": "0.10.6",
+    "v-vuerify-next": "^0.2.0",
+    "vee-validate": "^2.0.0",
     "vue-awesome-swiper": "^2.5.4",
-    "vue2-filters": "^0.1.9"
+    "vue2-filters": "^0.1.9",
+    "vuerify": "^0.4.0"
   },
   "scripts": {
     "dev": "nodemon --exec node server.js",

plugins/vee-validate.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import VeeValidate from 'vee-validate'
+
+Vue.use(VeeValidate)

plugins/vuerify.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import Vuerify from 'vuerify'
+import VuerifyDirective from 'v-vuerify-next'
+
+Vue.use(Vuerify)
+Vue.use(VuerifyDirective)

store/register.js

@@ -0,0 +1,15 @@
+import axios from '~plugins/axios'
+
+export const actions = {
+  // 个人注册
+  PersonalRegister ({ commit }, params = {}) {
+    commit('PersonalRegister/REQUEST_PERSONAL', params)
+    return axios.post(`/sso/personal/register`, {params})
+      .then(response => {
+        commit('PersonalRegister/GET_PERSONAL_SUCCESS', response.data)
+      }, err => {
+        commit('PersonalRegister/GET_PERSONAL_FAILURE', err)
+      })
+  }
+}
+

store/register/personalRegister.js

@@ -0,0 +1,23 @@
+export const state = () => ({
+  personal: {
+    fetching: false,
+    data: []
+  },
+  detail: {
+    fetching: false,
+    data: []
+  }
+})
+
+export const mutations = {
+  REQUEST_PERSONAL (state) {
+    state.personal.fetching = true
+  },
+  GET_PERSONAL_FAILURE (state) {
+    state.personal.fetching = false
+  },
+  GET_PERSONAL_SUCCESS (state, result) {
+    state.personal.fetching = false
+    state.personal.data = result
+  }
+}