表单用户名和密码的验证

import React, { Component } from 'react'

export default class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: { value: "", tip: "请输入数字字母_$组成不能以数字开头长度6到10位", className: "error", reg: /^[_$a-z][0-9a-z_$]{5,9}$/i },
            userpwd: {
                value: "", tip: "请输出数字字母组成长度6到10位", className: "error", reg: /^[a-z0-9]{6,10}$/i
            }
        }
    }

    checkValue(attr, value, tip, fn) {
        if (this.state[attr].reg.test(value)) {//正确
            this.setState({
                [attr]: { ...this.state[attr], value, tip: "√", className: "success" }
            }, () => {
                if (fn) {
                    fn()
                }
            })

        } else {
            this.setState({
                [attr]: { ...this.state[attr], value, tip, className: "error" }
            })

        }
    }
    checkUserpwd = (attr, value, tip) => {

        this.checkValue(attr, value, tip, () => {
            //密码的格式验证成功
            //验证密码的强度
            let numReg = /[0-9]/;
            let lowReg = /[a-z]/;
            let upperReg = /[A-Z]/;
            let count = numReg.test(value) + lowReg.test(value) + upperReg.test(value);
            let leval = `<button style="width:50px">弱</button>`;
            switch (count) {
                case 3:
                    leval = `<button style="width:150px">强</button>`;
                    break;
                case 2:
                    leval = `<button style="width:100px">中</button>`;
                    break;
            }
            this.setState({
                userpwd: { ...this.state.userpwd, tip: leval }
            })

        })


    }
    // setUsername = (value) => {//受控组件
    //         if (this.state.username.reg.test(value)) {//对
    //             this.setState({
    //                 username: { ...this.state.username,value, tip: "√", className: "success" }
    //             })
    //         } else {
    //             this.setState({
    //                 username: { ...this.state.username, value,tip: "请输入数字字母_$组成不能以数字开头长度6到10位", className: "error" }
    //             })
    //         }
    // }

    // setUserpwd = (value) => {

    //     if (this.state.userpwd.reg.test(value)) {
    //         this.setState({
    //             userpwd: { ...this.state.userpwd, value, tip: "√", className: "success" }
    //         })
    //     } else {
    //         this.setState({
    //             userpwd: { ...this.state.userpwd, value, tip: "请输出数字字母组成长度6到10位", className: "error" }
    //         })
    //     }

    // }
    login=()=>{
        if(this.state.username.className=="success" && this.state.userpwd.className == "success"){
            alert("验证成功");
        }else{
            alert("请注意红色提示");
        }
    }
    render() {
        return (
            <div>
                <div className="item">
                    用户名<input value={this.state.username.value} onChange={(e) => {
                        this.checkValue("username", e.target.value, "请输入数字字母_$组成不能以数字开头长度6到10位");
                    }} />
                    <span className={this.state.username.className}>
                        {this.state.username.tip}
                    </span>
                </div>
                <div className="item">
                    密码<input value={this.state.userpwd.value} onChange={(e) => {
                        this.checkUserpwd("userpwd", e.target.value, "请输出数字字母组成长度6到10位");
                    }} />
                    <span className={this.state.userpwd.className} dangerouslySetInnerHTML={{__html:this.state.userpwd.tip}}>
                 </span>
                </div>
                <button onClick={this.login}>登录</button>
            </div>
        )
    }
}