增加登录页表单验证

src/server/ajax.js

@@ -34,8 +34,8 @@ const reponseCodeHandler = (res) => {
       router.push({ name: 'upperLimitErr' })
     }else if (code == '710' || code == '720') {
       if(Common.oneOf(res.config.method.toLocaleLowerCase(), ['post', 'put', 'delete'])){
-        Modal.error({
-          title: '提交错误',
+        Modal.warning({
+          title: '提示',
           content: !res.data.msg?'':res.data.msg,
           okText: '确认',
           cancelText: '取消',
@@ -47,8 +47,8 @@ const reponseCodeHandler = (res) => {
       // router.push({ name: 'networkErr' })
     } else{
       if(Common.oneOf(currentMethod.toLocaleLowerCase(), ['post', 'put', 'delete'])){
-        Modal.error({
-          title: '提交错误',
+        Modal.warning({
+          title: '提示',
           content: '系统异常',
           okText: '确认',
           cancelText: '取消',

src/views/login.vue

@@ -5,7 +5,7 @@
       <h3 style="color: #40a9ff;">{{logoName}}</h3>
       <a-form :form="form">
         <a-form-item>
-          <a-input  v-decorator="['username']" placeholder="用户名">
+          <a-input  v-decorator="['username',{ validateTrigger:'blur',  rules: [ { required: true,validator: validate} ] }]" placeholder="用户名">
             <a-icon
               slot="prefix"
               type="user"
@@ -14,7 +14,7 @@
           </a-input>
         </a-form-item>
         <a-form-item>
-          <a-input  v-decorator="['pwd']" type="password" placeholder="密码">
+          <a-input  v-decorator="['pwd',{ validateTrigger:'blur',  rules: [ { required: true,validator: validate} ] }]" type="password" placeholder="密码">
             <a-icon
               slot="prefix"
               type="lock"
@@ -66,30 +66,42 @@ export default {
         }
       })
     },
+    //必填验证
+    validate(rule, value, callback){
+      if (!value && typeof value!='number') {
+        callback('必填！')
+      }else{
+        callback()
+      }
+    },
     login() {
-      const params = {
-        'username': this.form.getFieldValue('username'), 
-        'pwd': encryptDes(this.form.getFieldValue('pwd'))
-      } 
-      this.$ajax.post({
-        url: this.$api.POST_LOGIN,
-        params,
-      }).then(res => { 
-        const store = JSON.parse(sessionStorage.getItem('VuexStore')) 
-        if (store) store.content = ''
-        sessionStorage.setItem('VuexStore', JSON.stringify(store))
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          const params = {
+            'username': this.form.getFieldValue('username'), 
+            'pwd': encryptDes(this.form.getFieldValue('pwd'))
+          } 
+          this.$ajax.post({
+            url: this.$api.POST_LOGIN,
+            params,
+          }).then(res => { 
+            const store = JSON.parse(sessionStorage.getItem('VuexStore')) 
+            if (store) store.content = ''
+            sessionStorage.setItem('VuexStore', JSON.stringify(store))
         
-        // 当前登录的账号密码的返回值
-        if (res.code == 200) { 
-          res.token = this.$com.confirm(res, 'data.content', [])
-          // console.log(res.token)
-          this.$cookie.set('token', 'bearer ' + res.token.access_token)
-          this.$cookie.set('userName', res.name) // 存储当前账号的用户名
-          this.$router.push({
-            path: '/portal-home'
+            // 当前登录的账号密码的返回值
+            if (res.code == 200) { 
+              res.token = this.$com.confirm(res, 'data.content', [])
+              // console.log(res.token)
+              this.$cookie.set('token', 'bearer ' + res.token.access_token)
+              this.$cookie.set('userName', res.name) // 存储当前账号的用户名
+              this.$router.push({
+                path: '/portal-home'
+              })
+            } else {
+              // this.$message.error(res.msg)
+            }
           })
-        } else {
-          this.$message.error(res.msg)
         }
       })
     },