react的表单验证
// @ts-nocheck
import React, { Component } from "react";
export default class Menu5 extends Component {
constructor(props) {
super(props);
this.state = {
username: {
value: "",
reg: /^[a-z$_][0-9a-z$_]{5,9}$/i,
tip: "输出内容",
class: "error",
},
userpwd: {
value: "",
reg: /^[0-9a-z$_]{5,9}$/i,
tip: "输出内容",
class: "error",
},
usertel: {
value: "",
reg: /^1[3-9][0-9]{9}$/,
tip: "输出内容",
class: "error",
},
};
}
checkReg = (attr, tip) => {
console.log(this.state[attr].value);
if (this.state[attr].reg.test(this.state[attr].value)) {
this.setState({
[attr]: {
...this.state[attr],
tip: "√",
class: "success",
},
});
return true;
} else {
this.setState({
[attr]: {
...this.state[attr],
tip,
class: "error",
},
});
return false;
}
};
checkPwd = () => {
if (this.checkReg("userpwd", "输入内容")) {
let numReg = /[0-9]/;
let upperReg = /[A-Z]/;
let lowReg = /[a-z]/;
let count =
numReg.test(this.state.username.value) +
upperReg.test(this.state.userpwd.value) +
lowReg.test(this.state.usertel.value);
switch (count) {
case 3:
this.setState({
userpwd: {
...this.state.userpwd,
tip: "<button style='width:150px' >强</button>",
class: "success",
},
});
break;
case 2:
this.setState({
...this.state.userpwd,
tip: "<button style='width:100px'>中</button>",
class: "success",
});
break;
default:
this.setState({
...this.state.userpwd,
tip: "<button style='width:50px'>弱</button>",
class: "success",
});
break;
}
}
};
add = () => {
console.log(this.state.username.value);
if (
this.state.username.class == "success" &&
this.state.userpwd.class == "success" &&
this.state.usertel.class == "success"
) {
alert("全部验证成功");
} else {
alert("请注意红色错误提示");
}
// eslint-disable-next-line eqeqeq
};
render() {
return (
<div>
用户名:
<input
type="text"
value={this.state.username.value}
onInput={(e) => {
this.setState(
{
username: { ...this.state.username, value: e.target.value },
},
() => {
this.checkReg("username", "输入内容");
}
);
}}
/>
<span className={this.state.username.class}>
{this.state.username.tip}
</span>
<br />
密码:
<input
type="text"
value={this.state.userpwd.value}
onInput={(e) => {
this.setState(
{
userpwd: { ...this.state.userpwd, value: e.target.value },
},
() => {
this.checkPwd();
}
);
}}
/>{" "}
<span className={this.state.userpwd.class}>
{this.state.userpwd.tip}
</span>
<br />
电话:
<input
type="text"
value={this.state.usertel.value}
onInput={(e) => {
this.setState(
{
usertel: { ...this.state.usertel, value: e.target.value },
},
() => {
this.checkReg("usertel", "输入内容");
}
);
}}
/>{" "}
<span className={this.state.usertel.class}>
{this.state.usertel.tip}
</span>
<br />
<button
onClick={() => {
this.add();
}}
>
提交
</button>
</div>
);
}
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通