[技术专项-表单] 好的表单验证和提交方式

44 阅读1分钟
// user.js

function validateEmail() {
     var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return re.test(email);

}

const requiredFields = ['email', 'password']

export default class User {
  constructor(payload ={}) {
     this.email = payload.email || ''
     this.name = payload.email || ''
     this.password = payload.password || ''

     this.isValidEmail = true

   }



  checkValidForm() {
       let requiredField = requiredFields.find(field => {
           return !this[field].length && (prop === 'email' && !validateEmail(this.email) && (this.isValidEmail = false))
       })

      // 如果有未填的属性,执行错误回调。如果都填写了,则提交表单
      return new Promise((resolve, reject) => requiredProp ? reject() : resolve())


    }

使用

// register or login page

import User from './models/user.js'
this.userModel = new User()


this.userModel.checkFormValid().then(() => {
  // valid
}, () => {
 // invalid
})