📅  最后修改于: 2023-12-03 14:52:33.913000             🧑  作者: Mango
在 ReactJS 中验证日期需要将日期字符串转换成日期对象,然后判断日期对象是否为有效日期。下面是一个示例:
function isValidDate(dateString) {
var pattern = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/;
if(!pattern.test(dateString)) return false;
var date = new Date(dateString);
if(date == "Invalid Date") return false;
return true;
}
这个函数接受一个日期字符串参数,并返回一个布尔值表示该日期是否有效。它使用一个正则表达式来检查日期字符串的格式是否为“yyyy-mm-dd”,然后使用Date()构造函数将日期字符串转换成日期对象。如果日期对象为“Invalid Date”,则说明该日期不是有效日期。
可以将这个函数与React组件一起使用,例如在表单中验证用户输入的日期。下面是一个示例:
class DateForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: '', valid: true};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({value: event.target.value, valid: isValidDate(event.target.value)});
}
handleSubmit(event) {
alert('The date you entered is: ' + this.state.value);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Enter a date (yyyy-mm-dd):
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" disabled={!this.state.valid} />
</form>
);
}
}
这个React组件包含一个文本输入框和一个提交按钮。在输入框中输入一个日期字符串,并使用isValidDate()函数验证该字符串是否为有效日期。如果日期字符串无效,则禁用提交按钮。如果日期字符串有效,则在提交表单时弹出一个警告框,显示用户输入的日期。
以上是在 ReactJS 中验证日期的基本方法,可以根据实际需要进行修改和扩展。