如何在只使用javascript和DOM元素的情况下使用表单验证？
如何在只使用javascript和DOM元素的情况下使用表单验证？
提问于 2020-05-10 12:11:11
我给了一个难题来弄清楚只使用js的表单验证是什么，这里奇怪的是没有表单名称，类型不使用ie，但它们确实有名称，但除此之外的主要目标是确保至少有一些数据输入到每个输入类型(即，fullname甚至可以是1个字母，只要它是一个字符)。另一件需要注意的事情是，我无论如何都不能更改html代码。由于我不能在验证中使用表单名称，所以我在网上看到的示例很有帮助，但还不足以让我继续下去。任何帮助都将不胜感激。
<form action = "form.html" method = "get"><br/>
Name:<input type = "text" name = "fullname" value="Enter Full Name"/><br/>
Gender:<br/>
Male<input type = "radio" name = "gender" value="male"/>Female<input type = "radio" name = "gender"
value="female"/><br/>
Hobbies<br/>
Baseball <input type = "checkbox" name = "hobbies[]" value = "baseball" />
Football <input type = "checkbox" name = "hobbies[]" value = "football" />
Hockey <input type = "checkbox" name = "hobbies[]" value = "hockey" /><br/>
Favorite Show <select name = "show">
<option value = "">Choose Below</option>
<option value = "ATHF">Aqua Teen Hunger Force</option>
<option value = "Family Guy">Family Guy</option>
<option value = "Simpsons">Simpsons</option>
</select><br/>
Comments<br/>
<textarea cols = "50" rows = "6" name = "comments">Enter Comments</textarea><br/>
<input type = "submit" name = "submit" value = "enter me" />
</form>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-10 12:48:54
这有点乱，但它是有效的。我不会更改任何HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<form action = "form.html" method = "get"><br/>
Name:<input type = "text" name = "fullname" value="Enter Full Name"/><br/>
Gender:<br/>
Male<input type = "radio" name = "gender" value="male"/>Female<input type = "radio" name = "gender"
value="female"/><br/>
Hobbies<br/>
Baseball <input type = "checkbox" name = "hobbies[]" value = "baseball" />
Football <input type = "checkbox" name = "hobbies[]" value = "football" />
Hockey <input type = "checkbox" name = "hobbies[]" value = "hockey" /><br/>
Favorite Show <select name = "show">
<option value = "">Choose Below</option>
<option value = "ATHF">Aqua Teen Hunger Force</option>
<option value = "Family Guy">Family Guy</option>
<option value = "Simpsons">Simpsons</option>
</select><br/>
Comments<br/>
<textarea cols = "50" rows = "6" name = "comments">Enter Comments</textarea><br/>
<input type = "submit" name = "submit" value = "enter me" />
</form>
</body>
<script type="text/javascript">
function validate(){
name = document.getElementsByName("fullname")[0].value.length
gender1 = document.getElementsByName("gender")[0].checked
gender2 = document.getElementsByName("gender")[1].checked
hobbies1 = document.getElementsByName("hobbies[]")[0].checked
hobbies2 = document.getElementsByName("hobbies[]")[1].checked
hobbies3 = document.getElementsByName("hobbies[]")[2].checked
show = document.getElementsByName("show")[0].value
comment = document.getElementsByName("comments")[0].value.length
if(name==0 || (!gender1 && !gender2) || (!hobbies1 && !hobbies2 && !hobbies3) || comment==0 || show==""){
alert("please fill all")
}
}
button = document.getElementsByName("submit")
eButton = button[0].addEventListener("click",validate)
</script>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61707077
复制相关文章
相似问题
腾讯云开发者
