javascript - 当字段中存在值时,如何向输入字段添加验证检查?
问题描述
我有一个表格,其中包含 3 个输入字段,FIRST NAME、LAST NAME、NUMBER。因此,一旦表单打开,就会有一组特定的预填充值来自后端。因此,如果我尝试为我的名字添加验证检查,并且如果用户将字段设为空白并单击提交,它会在控制台中显示我未定义相应名字的值。那么,有人可以帮助添加对名字、姓氏和号码的验证检查吗?
const EditContact = inject('Contacts')(observer((props) => {
const { text, Contactfirst, apptContacts } = props;
const { updateContact } = apptContacts;
const CMS = text.appointmentManager.editAppointmentContact;
const [state, setState] = React.useState({
data: {
firstName: Contactfirst[0],
lastName: Contactfirst[1],
number: Contactfirst[2],
},
firstNameValid: '',
lastNameValid: '',
numberValid: '',
});
const handleTextareaChange = (event) => {
const { data } = state;
data[event.target.name] = event.target.value;
setState({
data,
});
};
const valid = () => {
if (state.data.firstName !== 'undefined') {
setState({ firstNameValid: 'Required.Please enter your given name.' });
}
};
const saveButton = () => {
if (valid()) {
const personName = `${state.data.firstName} ${state.data.lastName}`;
const primaryContact = {
name: personName,
phoneNumber: state.data.number,
};
}
};
return (
<div>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
<h1 tabIndex="-1" className="HeadingB mt-sheet-heading">
{CMS.heading1}
</h1>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
<TextField id="givenName" name="firstName" label={CMS.name} onChange={handleTextareaChange} value={(state.data.firstName !== 'undefined') ? state.data.firstName : ''} />
<p>{state.firstNameValid}</p>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
<TextField id="familyName" name="lastName" label={CMS.familyName} onChange={handleTextareaChange} value={(state.data.lastName !== 'undefined') ? state.data.lastName : ''} />
<p>{state.lastNameValid}</p>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
<TextField id="mobileNumber" name="number" label={CMS.mobile} onChange={handleTextareaChange} value={(state.data.number !== 'undefined') ? state.data.number : ''} />
<p>{state.numberValid}</p>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
<ActionButton className={styles.saveCta} variant="HighEmphasis" label={CMS.saveCTA} onClick={() => saveButton()} />
</div>
);
}));
export default EditContact ;
解决方案
如果您想为您的组件使用材料 ui,这很容易对您的文本字段应用验证。只需点击此链接 https://mui.com/components/text-fields/#validation
推荐阅读
- r - Shiny app radioButtons invisible in RStudio viewer pane
- python - 如何在 tf.Estimator 检查点中保留不可训练的变量?
- fuzzing - 用于磁盘解析的 Libfuzzer 目标
- c - Pass a pointer to struct and a int to a function in C to implement a stack
- c# - 在启用自动生成主键的情况下,如何在 DbContext 的“OnModelCreating”方法期间播种主数据?
- python - Chrome 浏览器上的 Selenium Python 自动化
- laravel - 嗨,我现在如何使用下拉菜单 - LARAVEL 将数据(如广告)插入到这个嵌套集模型中?
- python - 尽管守护进程设置为 True,但 Python 线程并没有停止
- ios - Firebase Observer Event Type
- https - HTTPS 请求重启 NodeMCU