https://www.enjoywhite.com/assets/js/unit/register.js

1class ScriptRegister extends Script {
2  constructor(params) {
3    super(params)
4    this.$form = document.querySelector(`#${this.attrId} form`)
5    this.$email = this.$form.querySelector('[type="email"]')
6    this.utils = Utilts.ins()
7    this.successHandles = [
8      () => { this.utilts.setGtag('register') }
9    ]
10  }
11  /** 初始化，支持异步 */
12  async init() {
13    this.inputInitEvent()
14
15    this.$form.onsubmit = event => {
16      // 取消默认事件
17      event.preventDefault()
18      // 阻止冒泡事件
19      event.stopPropagation()
20      // 提交
21      this.submit()
22    }
23  }
24
25  handleRegisterSuccess() {
26    for (const handle of this.successHandles) {
27      if (typeof handle === 'function') {
28        handle()
29      }
30    }
31  }
32
33  /**表单提交 */
34  submit() {
35    const isTrue = this.checkSubmit()
36    if (!isTrue) return
37    if (Utilts.ins().checkDesign()) return
38    const that = this
39    const formData = new FormData(this.$form)
40    // 提交请求， （部分参数暂时没有）
41    this.utils.request({
42      url: '/member/register',
43      method: 'POST',
44      params: {
45        email: formData.get('email'),
46        password: this.utilts.encodeBase64(formData.get('password')),
47        confirm_password: this.utilts.encodeBase64(formData.get('confirm_password')),
48        site_id: window.app.info.site.site_id,
49        visitor_code: window.app.info.user.visitor_code,
50        visitor_id: window.app.info.user.visitor_id
51      },
52      message: false
53    })
54      .then(() => {
55        that.handleRegisterSuccess()
56        new Modal().confirm(Utilts.ins().$t('Register Success'))
57          .then(() => {
58            // new Message().loading('Heading to the login page')
59            // window.location.href = globalThis.Server.getRinseHref('/login.html', window.app.info.site)
60			//直接登录
61			new Message().loading(Utilts.ins().$t('Welcome to the website'))
62			window.app.utilts.login({ username: formData.get('email'), password: formData.get('password') })
63          })
64          .catch(() => {
65            new Message().warn(Utilts.ins().$t('Cancel the login'))
66            for (const input of this.$form.querySelectorAll('input')) input.value = ''
67          })
68      })
69      .catch(err => {
70        new Message().error(err.msg)
71      })
72  }
73  checkSubmit() {
74    let form_item = this.$form.querySelectorAll('.form-control')
75    for (const el of form_item) {
76      if (!this._checkForm(el)) return false
77    }
78    return true
79  }
80  /**表单元素事件初始化 */
81  inputInitEvent() {
82    let form_item = this.$form.querySelectorAll('.form-control')
83    for (const el of form_item) {
84      el.addEventListener('blur', () => this._checkForm(el))
85    }
86  }
87  _checkForm(el) {
88    let val = el.value
89    const type = el.getAttribute('name')
90    let isTrue = true
91    // 邮箱格式
92    if (type === 'email') {
93      const reg = /^[^\.][a-zA-Z0-9\!\#\$\%\&\'\"\*\+\-\/\=\?\^\_\`\{\|\}\~\.]+@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/
94      isTrue = this.checkFormValid(el, !reg.test(val))
95    }
96    else if (type === 'password') {
97      const reg2 = /(?=.*([a-zA-Z].*))(?=.*[0-9].*)[a-zA-Z0-9-*/+.~!@#$%^&*()]{6,20}$/;
98      // 密码长度3到20内
99      isTrue = this.checkFormValid(el, !reg2.test(val))
100      this.$form.querySelector('[name="confirm_password"]').setAttribute('pattern', val)
101    }
102    // 确认密码与密码一致
103    else if (type === 'confirm_password') {
104      const isValid = (val === '' || val !== this.$form.querySelector('[name="password"]').value)
105      isTrue = this.checkFormValid(el, isValid)
106    }
107    return isTrue
108  }
109  /**验证表单 */
110  checkFormValid(el, match) {
111    // 匹配验证规则
112    if (match) {
113      // 表单禁止提交， 表单元素提示错误信息
114      el.classList.remove('is-valid')
115      el.classList.add('is-invalid')
116      this.$form.classList.remove('was-validated')
117      return false
118    }
119    else {
120      // 表单解放提交
121      el.classList.remove('is-invalid')
122      el.classList.add('is-valid')
123      return true
124    }
125  }
126}