一个表单中有两个 input 输入框,一个提交按钮。提交时要求满足条件: 两个输入框中都只能录入数字,且数字相等。
时间: 2023-11-27 08:52:29 浏览: 220
可以通过以下步骤实现表单中的输入框和提交按钮的功能:
1. 在 HTML 中创建表单,包括两个 input 输入框和一个提交按钮。
```html
<form>
<input type="text" id="input1" placeholder="请输入数字">
<input type="text" id="input2" placeholder="请输入数字">
<button type="button" id="submit-btn">提交</button>
</form>
```
2. 使用 JavaScript 获取表单元素,并为提交按钮添加点击事件监听器。
```javascript
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const submitBtn = document.getElementById('submit-btn');
submitBtn.addEventListener('click', () => {
const num1 = Number(input1.value);
const num2 = Number(input2.value);
if (!isNaN(num1) && !isNaN(num2) && num1 === num2) {
// 两个输入框中都只能录入数字,且数字相等,可以提交表单
console.log('提交表单');
} else {
// 输入不合法,提示用户重新输入
alert('请输入相等的数字');
}
});
```
3. 在点击提交按钮时,获取两个输入框中的数字,并进行验证。如果两个数字都是数字且相等,则可以提交表单,否则提示用户重新输入。
通过以上步骤,即可实现一个表单中有两个 input 输入框,一个提交按钮,并且在提交时要求满足条件: 两个输入框中都只能录入数字,且数字相等。
阅读全文