版权声明：本人原创，码字辛苦，整理代码更是辛苦，转发请说明原处https://blog.csdn.net/qq_37815596谢谢！ https://blog.csdn.net/qq_37815596/article/details/89635939
- 表单验证：验证密码强度（通过组件方法，但是不够灵活，只限于简单使用）
import React, { Component } from "react";
import "./App.css"
import ReactPasswordStrength from 'react-password-strength';
class App extends Component {
render() {
return (
<ReactPasswordStrength
minLength={5}
minScore={2}
scoreWords={['weak', 'okay', 'good', 'strong', 'stronger']}
inputProps={{ name: "password_input", autoComplete: "off", className: "form-control" }}
/>
);
}
}
export default App;- js方法验证
<script type="text/javascript">
$("#validate").click(function(){
if(isSimplePwd($("#password").val())<3){
alert("密码过于简单！");
}
})
/**
*简单验证密码强度
*必须包含数字、小写字母、大写字母、特殊字符 其三
*如果返回值小于3 则说明密码过于简单
*/
function isSimplePwd(s){
if(s.length<6){
return 0;
}
var ls = 0;
if(s.match(/([a-z])+/)){
ls++;
}
if(s.match(/([0-9])+/)){
ls++;
}
if(s.match(/([A-Z])+/)){
ls++;
}
if(s.match(/[^a-zA-Z0-9]+/)){
ls++;
}
return ls;
}
</script>- 在react中判断
密码中要求有大写字母，小写字母，数字，长度大于8，特殊符号这几个要求，没有满足的话，出现红色提示
只有密码满足要求，下方的confirm password才可输入密码。
confirm password密码匹配成功，图标变为绿色，CHANGE按钮变为绿色，才可修改密码
点击密码输入框内右侧的眼睛图标，可以显示隐藏密码
import React, { Component } from "react";
import "./App.css"
import { Icon, Input, Button } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
function isSimplePwd(s) {
if (s.length < 8) {
return 0;
}
var ls = 0;
if (s.length >= 8) {
ls++;
}
if (s.match(/([a-z])+/)) {
ls++;
}
if (s.match(/([0-9])+/)) {
ls++;
}
if (s.match(/([A-Z])+/)) {
ls++;
}
if (s.match(/[^a-zA-Z0-9]+/)) {
ls++;
}
return ls;
}
function isLowletter(a) {
if (a.match(/([a-z])+/)) {
return true;
} else {
return false;
}
}
function isUpperletter(a) {
if (a.match(/([A-Z])+/)) {
return true;
} else {
return false;
}
}
function isNum(a) {
if (a.match(/([0-9])+/)) {
return true;
} else {
return false;
}
}
function isSpecial(a) {
if (a.match(/[^a-zA-Z0-9]+/)) {
return true;
} else {
return false;
}
}
class App extends Component {
constructor(props) {
super(props);
this.state = {
showPassword: false,
showConfirmPassword: false,
firstPassword: false,
focusConfirmPwd: false,
pwdCorrect: false,
newPwd: "",
confPwd: ""
};
this.change = this.change.bind(this);
this.handleInputChangePwd = this.handleInputChangePwd.bind(this);
this.changeShowPassword = this.changeShowPassword.bind(this);
this.changeShowConfirmPassword = this.changeShowConfirmPassword.bind(this);
this.handleInputChangeConPwd = this.handleInputChangeConPwd.bind(this);
}
changeShowPassword() {
this.setState({ showPassword: !this.state.showPassword });
}
changeShowConfirmPassword() {
this.setState({ showConfirmPassword: !this.state.showConfirmPassword });
}
handleInputChangePwd(event) {
this.setState({
firstPassword: true,
newPwd: event.target.value
});
console.log("newPwd", event.target.value);
}
handleInputChangeConPwd(event) {
this.setState({
confPwd: event.target.value
});
console.log("confPwd", event.target.value);
}
change() {
const password = this.state.newPwd;
console.log("password",password)
}
render() {
return (
<div id="box">
<div className="totalBox">
<div className="resetPassBox">
<p className="leftLabel">New Password</p>
<Input
placeholder="New Password"
type={this.state.showPassword ? "text" : "password"}
key="password"
name="password"
onChange={this.handleInputChangePwd}
id="centerLabel"
/>
<div className="clearFloat" />
<Icon
as="i"
name={this.state.showPassword ? "eye slash" : "eye"}
onClick={this.changeShowPassword}
id="centerIcon"
/>
</div>
<div className="iconBoxTotal">
<Icon
as="i"
name="check"
id="checkIcon"
color={isSimplePwd(this.state.newPwd) === 5 ? "green" : "red"}
/>
<span
className="errorTip"
style={{
color: "red",
display:
isSimplePwd(this.state.newPwd) === 5
? "none"
: "inline-block"
}}
>
{this.state.newPwd.length < 8
? "Minimum length is 8"
: isLowletter(this.state.newPwd) === false
? "Require lowercase letters"
: isNum(this.state.newPwd) === false
? "Require numbers"
: isUpperletter(this.state.newPwd) === false
? "Require uppercase letters"
: isSpecial(this.state.newPwd) === false
? "Require special character"
: "OK"}
</span>
<div className="clearFloat" />
</div>
<div className="clearFloat" />
</div>
<div className="totalBox">
<div className="resetPassBox">
<p className="leftLabel">Confirm Password</p>
{isSimplePwd(this.state.newPwd) === 5 ? (
<Input
placeholder="Confirm Password"
type={this.state.showConfirmPassword ? "text" : "password"}
key="password"
name="password"
onChange={this.handleInputChangeConPwd}
id="centerLabelConfirm"
/>
) : (
<Input
placeholder="Confirm Password"
type={this.state.showConfirmPassword ? "text" : "password"}
key="password"
name="password"
onChange={this.handleInputChangeConPwd}
id="centerLabelConfirm"
disabled
/>
)}
<div className="clearFloat" />
<Icon
as="i"
name={this.state.showConfirmPassword ? "eye slash" : "eye"}
onClick={this.changeShowConfirmPassword}
id="centerIconConfirm"
/>
</div>
<div className="iconBoxTotal">
<Icon
as="i"
name="check"
id="checkIconConfirm"
color={
this.state.newPwd === this.state.confPwd &&
isSimplePwd(this.state.newPwd) === 5
? "green"
: "grey"
}
/>
<span
className="matchTip"
style={{
display:
this.state.newPwd === this.state.confPwd &&
isSimplePwd(this.state.newPwd) === 5
? "inline-block"
: "none"
}}
>
Match
</span>
</div>
<div className="clearFloat" />
</div>
{this.state.newPwd === this.state.confPwd ? (
<Button onClick={this.change} color="green">
Change
</Button>
) : (
<Button onClick={this.change} disabled>
Change
</Button>
)}
</div>
);
}
}
export default App;完整代码，请点击链接下载：https://download.csdn.net/download/qq_37815596/11150884，下载代码之后，npm install，再npm start即可使用