表格里的多个表单 用JS验证方法，谢谢 5
在静态网页中加上JavaScript互动1点击保存按钮进行入力check如果入力表单的内容为空，进行提示「请输入姓名」。如果入力表单的长度超过100字符，进行提示「输入的...
在静态网页中加上JavaScript互动
1点击保存按钮进行入力check
如果入力表单的内容为空，进行提示「请输入姓名」。
如果入力表单的长度超过100字符，进行提示「输入的内容过长」。
如果身高非数字，进行提示「请输入正确的身高」。
2.点击保存按钮显示在表格中
需要详细的步骤和代码 展开
1点击保存按钮进行入力check
如果入力表单的内容为空，进行提示「请输入姓名」。
如果入力表单的长度超过100字符，进行提示「输入的内容过长」。
如果身高非数字，进行提示「请输入正确的身高」。
2.点击保存按钮显示在表格中
需要详细的步骤和代码 展开
1个回答
展开全部
不知道你说的是多少个输入框，我这里有个例子可以参考下，希望能帮到你：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 在静态网页中加上JavaScript互动
1点击保存按钮进行入力check
如果入力表单的内容为空，进行提示「请输入姓名」。
如果入力表单的长度超过100字符，进行提示「输入的内容过长」。
如果身高非数字，进行提示「请输入正确的身高」。
2.点击保存按钮显示在表格中
需要详细的步骤和代码-->
<form >
<input type="text" id="input1" placeholder="请输入姓名"/> <span class="tip1"></span>
<br />
<input type="text" id="input2"/> <span class="tip2"></span><span class="tip2"></span>
<br />
<input type="text" id="input3"/> <span class="tip3"></span><span class="tip3"></span>
<br />
<input type="button" value="保存" onclick="save()"/>
</form>
<table border="1" cellspacing="1" cellpadding="1"></table>
</body>
<script type="text/javascript">
// 注：监听表单的submit事件前提是表单必须写在form里，如果没有form就监听按钮的onclick事件
function save(){
var input1Val1 = document.getElementById('input1').value;
var input1Val2 = document.getElementById('input2').value;
var input1Val3 = document.getElementById('input3').value;
if(input1Val1==''){
document.querySelector('.tip1').innerText = '请输入姓名';
return;
}else if(input1Val2.length>100){
document.querySelector('.tip2').innerText = '输入的内容过长';
return;
}else if(isNaN(input1Val3)){
document.querySelector('.tip3').innerText = '请输入正确的身高';
return;
}else{
//提交信息，保存数据在表格中
document.querySelector('.tip1').innerText = '';
document.querySelector('.tip2').innerText = '';
document.querySelector('.tip3').innerText = '';
createTable(input1Val1,input1Val2,input1Val3);
return;
}
}
function createTable(input1Val1,input1Val2,input1Val3){
var row = document.createElement('tr'); //创建行
var nameCell = document.createElement('td');//创建第1列name
nameCell.innerHTML = input1Val1; //填充数据
row.appendChild(nameCell); //加入行
var contCell = document.createElement('td'); //创建第2列内容
contCell.innerHTML = input1Val2;
row.appendChild(contCell);
var heightCell = document.createElement('td');//创建第3列身高 下面类似
heightCell.innerHTML = input1Val3;
row.appendChild(heightCell);
document.querySelector('table').appendChild(row);
}
</script>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
