当前位置:网站首页>Native form submission data
Native form submission data
2022-07-25 07:38:00 【Ma Youchen】


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 .
边栏推荐
- 【程序员2公务员】一、基本认知
- 【论文笔记】Next-ViT: Next Generation Vision Transformer for Efficient Deployment in Realistic Industrial
- Use cyclegan to train self-made data sets, popular tutorials, and get started quickly
- 深度学习制作数据集时,从长视频中指定每隔多少帧提取一张图像到指定文件路径的方法
- 深度学习训练和测试时出现问题:error: the following arguments are required: --dataroot,解决:训练文件的配置方法和测试文件的配置方法
- [unity introduction program] basic concepts GameObject & components
- 华为无线设备配置WAPI-证书安全策略
- [unity introduction program] basic concepts -2d rigid body 2D
- DJI内推码(一码一用,限时内推)
- Alibaba cloud image address & Netease cloud image
猜你喜欢
![[unity entry program] make my first little game](/img/e7/5dcb113c7fabd73ed632fb29619369.png)
[unity entry program] make my first little game

Before Oracle 19C migration, how important is it to do a good job of rat playback test?

NLP hotspots from ACL 2022 onsite experience

RPC communication principle and project technology selection

nanodet训练时出现问题:ModuleNotFoundError: No module named ‘nanodet‘的解决方法
![[paper notes] progressive layered extraction (PLE): a novel multi task learning (MTL) model for personalized](/img/a8/c5d14ec5f4a22f7925c6d7454b5a58.png)
[paper notes] progressive layered extraction (PLE): a novel multi task learning (MTL) model for personalized

全新8.6版本SEO快排系统(可源码级搭建)

Teach you to use cann to convert photos into cartoon style

How to use network installation to deploy multiple virtual servers in KVM environment

diagramscene工程难点分析
随机推荐
线代(矩阵‘)
QT学习日记20——飞机大战项目
冰冰学习笔记:类与对象(上)
Leetcode118. Yanghui triangle
What are the types of financial products in 2022? Which is suitable for beginners?
Servlet常用类剖析
First, how about qifujin
12 combination methods and risk interpretation of database architecture optimization (books available)
The idea of the regular crawler of the scratch
3. Promise
Matlab self programming series (1) -- angular distribution function
YUV player
[ES6] function parameters, symbol data types, iterators and generators
【ES6】函数的参数、Symbol数据类型、迭代器与生成器
When deep learning makes data sets, it specifies how many frames to extract an image from the long video to the specified file path
[wechat applet] global style, local style, global configuration
Install homebrew, NVM and verdaccio to build a private NPM warehouse
轮询、中断、DMA和通道
UXDB怎么从日期值中提取时分秒?
Nano data, football data, football match scores, sports data API, Qatar world cup