Native form submission data

index.ts

'use strict';

import { createElement, useState } from 'react';
import { request } from '../core/index';
import { namecheck, numcheck, emialCheck } from '../common/index';
import './index.less';


export default (props) => {

  const { styleConfig } = props?.data;
  const { bac, bacColor, bottom, top } = styleConfig;

  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [enterpriseName, setEnterpriseName] = useState('');
  const [email, setEmail] = useState('');
  const [describe, setDescribe] = useState('');

  const [verifyName, setVerifyName] = useState('');
  const [verifyEmail, setVerifyEmail] = useState('');
  const [verifyPhone, setVerifyPhone] = useState('');


  //  Check the name 
  const checkName = (val) => {
    if (val !== '') {
      if (!namecheck(val)) {
        //  Enter a reasonable name 
        setVerifyName('unreasonable');
        return false;
      } else {
        //  Input correct , No operation 
        setVerifyName('reasonable');
        return true;
      }
    } else {
      //  Enter a name 
      setVerifyName('empty');
      return false;
    }
  };

  //  Check cell phone number 
  const checkPhone = (val) => {
    if (val !== '') {
      if (!numcheck(val)) {
        setVerifyPhone('unreasonable');
        return false;
      } else {
        setVerifyPhone('reasonable');
        return true;
      }
    } else {
      setVerifyPhone('empty');
      return false;
    }
  };

  //  Checkbox 
  const checkEmial = (val) => {
    if (val !== '') {
      if (!emialCheck(val)) {
        setVerifyEmail('unreasonable');
        return false;
      } else {
        setVerifyEmail('reasonable');
        return true;
      }
    } else {
      setVerifyEmail('empty');
      return false;
    }
  };

  const submitInfo = () => {
    // console.log('submit', name, phone, enterpriseName, email, describe);
    if (checkEmial(email) && checkPhone(phone) && checkName(name)) {
      return request({
        v: '1.0',
        method: 'get',
        api: 'consulting.add.v255555',
        data: {
          name, //  full name , At present, the back end is optional , You must control the front end 
          email, //  mailbox 
          phone, //  cell-phone number 
          memo: describe, //  Modeling requirements , Unified in the requirements description 
          enterpriseName, //  Company name enterpriseName
          userType: 'home_enterprise', //  Customer type  home_enterprise（ Home enterprises ）
          clientFrom: 'site_consulting', //  User source , Can not pass , The default is site_consulting（ Website consultation ）
        },
      })
        .then((response) => {
          const { statusCode, fail } = response;
          if (statusCode === 'OK' || fail === 'success') {
            //  After success 
            alert(' Submit successfully ');
          }
        })
        .catch((e) => {
          alert(' Oh dear , The system opened a small guess , Calm down ');
        });
    }
  };

  const setValue = (e, val) => {
    switch (val) {
      case 'name':
        setName(e);
        break;
      case 'phone':
        setPhone(e);
        break;
      case 'enterprisename':
        setEnterpriseName(e);
        break;
      case 'email':
        setEmail(e);
        break;
      case 'remark':
        setDescribe(e);
        break;
      default:
        break;
    }
  };


  return (
    <div className="box" style={
   { marginTop: top, marginBottom: bottom }}>
      <form action="" id="form-com">
        <p className="main-text">
          <span className="red-start">*</span>
          <span> full name </span>
        </p>
        <input
          type="text"
          autoComplete="off"
          onBlur={(e) => {
            checkName(e.target.value);
          }}
          onChange={(e) => {
            setValue(e.target.value, 'name');
          }}
          maxLength={20}
          placeholder=" Please enter "
          className="test"
        />
        <div x-if={verifyName === 'empty'} className="error-warning">
           Name cannot be empty 
        </div>
        <div x-if={verifyName === 'unreasonable'} className="error-warning">
           Please enter the correct name , most 20 Characters ~
        </div>
        <p className="main-text">
          <span className="red-start">*</span>
          <span> cell-phone number </span>
        </p>
        <input
          type="text"
          autoComplete="off"
          onBlur={(e) => {
            checkPhone(e.target.value);
          }}
          onChange={(e) => {
            setValue(e.target.value, 'phone');
          }}
          placeholder=" Please enter "
          className="test"
        />
        <div x-if={verifyPhone === 'empty'} className="error-warning">
           Cell phone number cannot be empty 
        </div>
        <div x-if={verifyPhone === 'unreasonable'} className="error-warning">
           Please enter the correct mobile phone number ~
        </div>
        <p className="main-text"> Company name </p>
        <input
          type="text"
          autoComplete="off"
          placeholder=" Please enter "
          onChange={(e) => {
            setValue(e.target.value, 'enterprisename');
          }}
          className="test"
        />
        <p className="main-text">
          <span className="red-start">*</span>
          <span> Acceptance mailbox </span>
        </p>
        <input
          type="text"
          autoComplete="off"
          placeholder=" Please enter "
          onBlur={(e) => {
            checkEmial(e.target.value);
          }}
          onChange={(e) => {
            setValue(e.target.value, 'email');
          }}
          className="test"
        />
        <div x-if={verifyEmail === 'empty'} className="error-warning">
           The mailbox cannot be empty 
        </div>
        <div x-if={verifyEmail === 'unreasonable'} className="error-warning">
           Please enter the correct email format 
        </div>
        <p className="main-text"> Modeling requirements </p>
        <textarea
          type="text"
          autoComplete="off"
          onChange={(e) => {
            setValue(e.target.value, 'remark');
          }}
          placeholder=" Please enter "
          // className="test"
        />
      </form>
      <div className="submit-container" onClick={submitInfo}>
        <div className="submit-view" style={
   { background: bac }}>
          <span className="submit-btn" style={
   { color: bacColor }}>
             Submission of information 
          </span>
        </div>
      </div>
    </div>
  );
};

common/index.ts

/**
 *  Time processing 
 * @param str  Time string
 * @returns
 */
export const dealTime = (str: string) => {
  if (!str) return null;
  if (typeof str === 'string') return str.replace(/-/g, '.').split(' ')[0];
  const add0 = (m) => (m < 10 ? `0${m}` : m);
  const time = new Date(str);
  const y = time.getFullYear();
  const m = time.getMonth() + 1;
  const d = time.getDate();
  return `${y}-${add0(m)}-${add0(d)}`;
};

/**
 *  Object turn string
 * @param obj
 * @returns
 */
export const objToString = (obj) => {
  if (!obj) return;
  let result = '';
  Object.keys(obj).forEach((item) => {
    result += `${item}=${obj[item]}`;
  });
  return result;
};

/**
 *  Get the current system 
 * @returns
 */
export const appSource = () => {
  //Navigator  Object contains information about the browser 
  //userAgent  Property is a read-only string , The browser is declared for  HTTP  Value of the requested user agent header .
  const u = navigator.userAgent;
  const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  if (isiOS) {
    return 'ios';
  } else {
    return 'android';
  }
};


export const namecheck = (value) => {
  // const reg = /^[\u2E80-\u9FFF]+$/; // Unicode The range of Chinese characters in the code 
  const reg = /[\u4e00-\u9fa5_a-zA-Z0-9_]{1,20}/; // Unicode The range of Chinese characters in the code 
  if (value && value.length >= 2) {
    if (reg.test(value)) {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
};

export const numcheck = (value) => {
  const reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
  if (reg.test(value)) {
    return true;
  } else {
    return false;
  }
};

export const emialCheck = (value) => {
  const reg = /^\[email protected][0-9a-z]+\.[a-z]+$/;
  if (reg.test(value)) {
    return true;
  } else {
    return false;
  }
};

index.less

#form-com {
  margin: 0 auto;
}
.main-text {
  height: 26px;
  vertical-align: middle;
  margin-top: 18px;
}
.red-start {
  color: red;
  margin-right: 2px;
  font-size: 13px;
}
.textColor {
  color: #000;
}
.test {
  width: 540px;
  height: 42px;
  // color: #999;
  outline: none;
  border: 1px solid #999;
}

.area {
  flex: 1;
  justify-content: center;
  align-items: center;
}
.container {
  color: #000;
}

input {
  -web-kit-appearance: none;
  -moz-appearance: none;
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  color: #000;
  outline: 0;
  padding-left: 10px;
}
input:focus {
  border: 1px solid #e6e6e6;
}
.submit-container {
  width: 144px;
  height: 48px;
  font-family: PingFang SC;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  margin: 0 auto;
  cursor: pointer;
  margin-top: 28px;
}
.submit-view {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 144px;
  height: 48px;
  // background-color: #3c6eff;
  border-radius: 24px;
}
.submit-btn {
  overflow: hidden;
  max-width: 132px;
  font-size: 16px;
  // color: #ffffff;
  text-overflow: ellipsis;
}
.error-warning {
  color: red;
}
textarea {
  -web-kit-appearance: none;
  -moz-appearance: none;
  border-radius: 5px;
  border: 1px solid #e6e6e6;
  color: #000;
  outline: 0;
  padding-left: 10px;
  padding-top: 10px;
  width: 540px;
  height: 142px;
  resize: none;
}
textarea:focus {
  border: 1px solid #e6e6e6;
}

  Submit data using native forms ,demo Above .