Javascript 如何防止在密码输入字段|中输入空格

在这里，我提供了我的代码，我想在密码输入字段中输入字符，我不想在其中输入空格/空格，但当我打印输入值时，它也会进入其中，因此它不包含空格/空格。请帮我解决这个问题

代码-

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { Form, Input, Label } from "semantic-ui-react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputFieldData: {
        pass: {
          val: "",
          error: false
        }
      }
    };
  }

  inputChange = e => {
    // prevent not to enter space charactes in password field while registering
    const re = /^\S*$/;
    let inputFieldData = this.state.inputFieldData;
    const name = e.target.name;
    if (re.test(e.target.value)) {
      inputFieldData[name]["val"] = e.target.value;
      console.log(e.target.value);
    }
    this.setState({ inputFieldData });
  };

  render() {
    const { inputFieldData } = this.state;

    return (
      <div className="App">
        <h1>Input box does not contain space in it</h1>
        <h3>Input Value: {inputFieldData["pass"]["val"]}</h3>
        <Form className="register-form">
          <Form.Field>
            <Input
              type="password"
              icon="user circle"
              name="pass"
              iconPosition="left"
              placeholder="Enter Password"
              onChange={this.inputChange}
              error={inputFieldData["pass"]["error"]}
            />
            {inputFieldData["pass"]["error"] && (
              <Label basic color="red" pointing>
                Field can not be empty
              </Label>
            )}
          </Form.Field>
        </Form>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
从“语义ui反应”导入{Form，Input，Label}；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
输入字段数据：{
通过：{
瓦尔：“，
错误：false
}
}
};
}
inputChange=e=>{
//防止注册时不在密码字段中输入空格字符
常数re=/^\S*$/；
让inputFieldData=this.state.inputFieldData；
const name=e.target.name；
if（重新测试（如目标值））{
inputFieldData[名称][“val”]=e.target.value；
console.log（如target.value）；
}
this.setState（{inputFieldData}）；
};
render（）{
const{inputFieldData}=this.state；
返回(
输入框中不包含空格
输入值：{inputFieldData[“pass”][“val”]}
{inputFieldData[“通过”][“错误”]&&(
字段不能为空
)}
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

您需要将输入值设置为

inputFieldData.pass.val

，
否则就是

---

您需要通过将

值

道具添加到

输入

组件来使用受控组件模式（请参见此处）

然后可以在

handleChange

函数中添加空间修剪逻辑

---

下面是一个示例：

只需在handleOnChange函数中执行以下操作：

 handleOnChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value.split(" ").join("")
    });
  };

---

让用户输入他们的密码。然后，您可以在调用API之前

trim（password）

，您只需检测空格键即可，请参阅我知道，但我不想使用

trim（）

。我不想在输入框内输入空格字符@在我发布这个问题之前，我尝试了你的方法，但它对我没有帮助@图沙瓦尔扎德

 handleOnChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value.split(" ").join("")
    });
  };