zoukankan      html  css  js  c++  java
  • 常见用户信息表单校验

    表单元素

    this.validateForm = this.fb.group({
          account          : [ null, [ Validators.required, this.accountValidator ] ],//账户
          password         : [ null, [ Validators.required, this.passwordValidator ] ],//密码
          checkPassword    : [ null, [ Validators.required, this.confirmationValidator ] ],//确认密码
          name             : [ null, [ Validators.required, this.usernameValidator ] ],//用户名
          phoneNumber      : [ null, [ Validators.required, this.phoneValidator ] ],//手机号
        });

    账户(英文、数字3-10位)

    // 账户校验
      public accountValidator = (control: FormControl): { [s: string]: boolean } => {
        const EMAIL_REGEXP = /^[a-zA-Z0-9]{3,10}$/;
        if (!control.value) {
          return { required: true };
        } else if (!EMAIL_REGEXP.test(control.value)) {
          return { confirm: true, error: true };
        }
      }

    用户名(中英文3-10)

    public usernameValidator = (control: FormControl): { [s: string]: boolean => {
        const EMAIL_REGEXP = /^[u2E80-u9FFFa-zA-Z]{3,10}$/;
        if (!control.value) {
          return { required: true };
        } else if (!EMAIL_REGEXP.test(control.value)) {
          return { confirm: true, error: true };
        }
      }

    密码(英文、数字、字符6-16)

    public passwordValidator = (control: FormControl): { [s: string]: boolean } => {
        const EMAIL_REGEXP = /^[A-Za-z0-9#.$@!~%^&*]{6,16}$/;
        if (!control.value) {
          return { required: true };
        } else if (!EMAIL_REGEXP.test(control.value)) {
          return { confirm: true, error: true };
        }
      }

    确认密码

    public confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
        if (!control.value) {
          return { required: true };
        } else if (control.value !== this.validateForm.controls[ 'password' ].value) {
          return { confirm: true, error: true };
        }
      }

    联系方式(11位手机号、座机)

    public phoneValidator = (control: FormControl): { [s: string]: boolean } => {
        const EMAIL_REGEXP = /^((0d{2,3}-d{7,8})|(1[34578]d{9}))$/;
        if (!control.value) {
          return { required: true };
        } else if (!EMAIL_REGEXP.test(control.value)) {
          return { confirm: true, error: true };
        }
      }
  • 相关阅读:
    国家电网 ERP系统
    小亚通SaaS ERP & 小鹅通 Education
    CRM User(Customer) Employee
    Docker ERP CRM
    OA、CRM、ERP之间的区别和联系是什么?
    基于jfinal开发的12306抢票软件
    15款优质Spring开源项目 脚手架
    Echart 跨域 Data Demo
    区块链+金融,带你直击实践应用中的需求和痛点
    thinkphp 5.0报错pcntl_signal() has been disabled for security reasons问题解决
  • 原文地址:https://www.cnblogs.com/zhuangcui/p/12134637.html
Copyright © 2011-2022 走看看