Optimize form validation

resources/assets/src/components/Captcha.vue

@@ -18,6 +18,7 @@
           type="text"
           class="form-control"
           :placeholder="$t('auth.captcha')"
+          required
         >
       </div>
     </div>

resources/assets/src/views/auth/Forgot.vue

@@ -7,6 +7,7 @@
         type="email"
         class="form-control"
         :placeholder="$t('auth.email')"
+        required
       >
       <span class="glyphicon glyphicon-envelope form-control-feedback" />
     </div>
@@ -14,7 +15,6 @@
     <captcha ref="captcha" />
 
     <div class="callout callout-success" :class="{ hide: !successMsg }">{{ successMsg }}</div>
-    <div class="callout callout-info" :class="{ hide: !infoMsg }">{{ infoMsg }}</div>
     <div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
 
     <div class="row">
@@ -59,7 +59,6 @@ export default {
   data: () => ({
     email: '',
     successMsg: '',
-    infoMsg: '',
     warningMsg: '',
     pending: false,
   }),
@@ -67,30 +66,16 @@ export default {
     async submit() {
       const { email } = this
 
-      if (!email) {
-        this.infoMsg = this.$t('auth.emptyEmail')
-        this.$refs.email.focus()
-        return
-      }
-
-      if (!/\S+@\S+\.\S+/.test(email)) {
-        this.infoMsg = this.$t('auth.invalidEmail')
-        this.$refs.email.focus()
-        return
-      }
-
       this.pending = true
       const { code, message } = await this.$http.post(
         '/auth/forgot',
         { email, captcha: await this.$refs.captcha.execute() }
       )
       if (code === 0) {
-        this.infoMsg = ''
         this.warningMsg = ''
         this.successMsg = message
         this.pending = false
       } else {
-        this.infoMsg = ''
         this.warningMsg = message
         this.pending = false
         this.$refs.captcha.refresh()

resources/assets/src/views/auth/Login.vue

@@ -6,6 +6,7 @@
         v-model="identification"
         class="form-control"
         :placeholder="$t('auth.identification')"
+        required
       >
       <span class="glyphicon glyphicon-envelope form-control-feedback" />
     </div>
@@ -16,13 +17,13 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.password')"
+        required
       >
       <span class="glyphicon glyphicon-lock form-control-feedback" />
     </div>
 
     <captcha v-if="tooManyFails" ref="captcha" />
 
-    <div class="callout callout-info" :class="{ hide: !infoMsg }">{{ infoMsg }}</div>
     <div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
 
     <div class="row">
@@ -78,7 +79,6 @@ export default {
       tooManyFails: blessing.extra.tooManyFails,
       recaptcha: blessing.extra.recaptcha,
       invisible: blessing.extra.invisible,
-      infoMsg: '',
       warningMsg: '',
       pending: false,
     }
@@ -89,18 +89,6 @@ export default {
         identification, password, remember,
       } = this
 
-      if (!identification) {
-        this.infoMsg = this.$t('auth.emptyIdentification')
-        this.$refs.identification.focus()
-        return
-      }
-
-      if (!password) {
-        this.infoMsg = this.$t('auth.emptyPassword')
-        this.$refs.password.focus()
-        return
-      }
-
       this.pending = true
       const {
         code, message, data: { login_fails: loginFails } = { login_fails: 0 },
@@ -131,7 +119,6 @@ export default {
           }
           this.tooManyFails = true
         }
-        this.infoMsg = ''
         this.warningMsg = message
         this.pending = false
         this.$refs.captcha.refresh()

resources/assets/src/views/auth/Register.vue

@@ -7,6 +7,7 @@
         type="email"
         class="form-control"
         :placeholder="$t('auth.email')"
+        required
       >
       <span class="glyphicon glyphicon-envelope form-control-feedback" />
     </div>
@@ -17,6 +18,9 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.password')"
+        required
+        minlength="8"
+        maxlength="32"
       >
       <span class="glyphicon glyphicon-lock form-control-feedback" />
     </div>
@@ -27,6 +31,9 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.repeat-pwd')"
+        required
+        minlength="8"
+        maxlength="32"
       >
       <span class="glyphicon glyphicon-log-in form-control-feedback" />
     </div>
@@ -44,6 +51,7 @@
         type="text"
         class="form-control"
         :placeholder="$t('auth.player-name')"
+        required
       >
       <span class="glyphicon glyphicon-pencil form-control-feedback" />
     </div>
@@ -60,6 +68,7 @@
         type="text"
         class="form-control"
         :placeholder="$t('auth.nickname')"
+        required
       >
       <span class="glyphicon glyphicon-pencil form-control-feedback" />
     </div>
@@ -125,48 +134,12 @@ export default {
         email, password, confirm, playerName, nickname,
       } = this
 
-      if (!email) {
-        this.infoMsg = this.$t('auth.emptyEmail')
-        this.$refs.email.focus()
-        return
-      }
-
-      if (!/\S+@\S+\.\S+/.test(email)) {
-        this.infoMsg = this.$t('auth.invalidEmail')
-        this.$refs.email.focus()
-        return
-      }
-
-      if (!password) {
-        this.infoMsg = this.$t('auth.emptyPassword')
-        this.$refs.password.focus()
-        return
-      }
-
-      if (password.length < 8 || password.length > 32) {
-        this.infoMsg = this.$t('auth.invalidPassword')
-        this.$refs.password.focus()
-        return
-      }
-
       if (password !== confirm) {
         this.infoMsg = this.$t('auth.invalidConfirmPwd')
         this.$refs.confirm.focus()
         return
       }
 
-      if (this.requirePlayer && !playerName) {
-        this.infoMsg = this.$t('auth.emptyPlayerName')
-        this.$refs.playerName.focus()
-        return
-      }
-
-      if (!this.requirePlayer && !nickname) {
-        this.infoMsg = this.$t('auth.emptyNickname')
-        this.$refs.nickname.focus()
-        return
-      }
-
       this.pending = true
       const { code, message } = await this.$http.post(
         '/auth/register',

resources/assets/src/views/auth/Reset.vue

@@ -7,6 +7,9 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.password')"
+        required
+        minlength="8"
+        maxlength="32"
       >
       <span class="glyphicon glyphicon-lock form-control-feedback" />
     </div>
@@ -17,6 +20,9 @@
         type="password"
         class="form-control"
         :placeholder="$t('auth.repeat-pwd')"
+        required
+        minlength="8"
+        maxlength="32"
       >
       <span class="glyphicon glyphicon-log-in form-control-feedback" />
     </div>
@@ -65,18 +71,6 @@ export default {
     async reset() {
       const { password, confirm } = this
 
-      if (!password) {
-        this.infoMsg = this.$t('auth.emptyPassword')
-        this.$refs.password.focus()
-        return
-      }
-
-      if (password.length < 8 || password.length > 32) {
-        this.infoMsg = this.$t('auth.invalidPassword')
-        this.$refs.password.focus()
-        return
-      }
-
       if (password !== confirm) {
         this.infoMsg = this.$t('auth.invalidConfirmPwd')
         this.$refs.confirm.focus()

resources/assets/tests/views/auth/Forgot.test.ts

@@ -20,19 +20,9 @@ test('submit forgot form', async () => {
     .mockResolvedValueOnce({ code: 0, message: 'ok' })
   const wrapper = mount(Forgot, { stubs: { Captcha } })
   const form = wrapper.find('form')
-  const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
   const success = wrapper.find('.callout-success')
 
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyEmail')
-
-  wrapper.find('[type="email"]').setValue('a')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidEmail')
-
   wrapper.find('[type="email"]').setValue('a@b.c')
   form.trigger('submit')
   await flushPromises()

resources/assets/tests/views/auth/Login.test.ts

@@ -28,18 +28,9 @@ test('login', async () => {
     .mockResolvedValueOnce({ code: 0, message: 'ok' })
   const wrapper = mount(Login, { stubs: { Captcha } })
   const form = wrapper.find('form')
-  const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
 
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyIdentification')
-
   wrapper.find('input').setValue('a@b.c')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyPassword')
-
   wrapper.find('[type="password"]').setValue('123')
   form.trigger('submit')
   await wrapper.vm.$nextTick()

resources/assets/tests/views/auth/Register.test.ts

@@ -34,32 +34,9 @@ test('register', async () => {
   const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
 
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyEmail')
-
-  wrapper.find('[type="email"]').setValue('a')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidEmail')
-
   wrapper.find('[type="email"]').setValue('a@b.c')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyPassword')
-
-  wrapper.findAll('[type="password"]').at(0)
-    .setValue('123456')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidPassword')
-
   wrapper.findAll('[type="password"]').at(0)
     .setValue('12345678')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidConfirmPwd')
-
   wrapper.findAll('[type="password"]').at(1)
     .setValue('123456')
   form.trigger('submit')
@@ -68,10 +45,6 @@ test('register', async () => {
 
   wrapper.findAll('[type="password"]').at(1)
     .setValue('12345678')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyNickname')
-
   wrapper.findAll('[type="text"]').at(0)
     .setValue('abc')
   form.trigger('submit')
@@ -99,17 +72,11 @@ test('register with player name', async () => {
   Vue.prototype.$http.post.mockResolvedValue({ code: 0, message: 'ok' })
   const wrapper = mount(Register, { stubs: { Captcha } })
   const form = wrapper.find('form')
-  const info = wrapper.find('.callout-info')
   wrapper.find('[type="email"]').setValue('a@b.c')
   wrapper.findAll('[type="password"]').at(0)
     .setValue('12345678')
   wrapper.findAll('[type="password"]').at(1)
     .setValue('12345678')
-
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyPlayerName')
-
   wrapper.findAll('[type="text"]').at(0)
     .setValue('abc')
   form.trigger('submit')

resources/assets/tests/views/auth/Reset.test.ts

@@ -15,22 +15,8 @@ test('reset password', async () => {
   const info = wrapper.find('.callout-info')
   const warning = wrapper.find('.callout-warning')
 
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.emptyPassword')
-
-  wrapper.findAll('[type="password"]').at(0)
-    .setValue('123456')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidPassword')
-
   wrapper.findAll('[type="password"]').at(0)
     .setValue('12345678')
-  form.trigger('submit')
-  expect(Vue.prototype.$http.post).not.toBeCalled()
-  expect(info.text()).toBe('auth.invalidConfirmPwd')
-
   wrapper.findAll('[type="password"]').at(1)
     .setValue('123456')
   form.trigger('submit')

resources/misc/changelogs/en/4.4.0.md

@@ -6,6 +6,7 @@
 
 - Push notifications to queue for performance.
 - Optimized exception stack of Ajax error.
+- Optimized validating forms of pages like logining and registering.
 
 ## Fixed
 

resources/misc/changelogs/zh_CN/4.4.0.md

@@ -6,6 +6,7 @@
 
 - 发送通知时将任务推送到队列
 - 优化 Ajax 中的错误显示
+- 优化登录、注册等页面的表单校验
 
 ## 修复