HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在, 如果不存在,就弹出信息,阻止表单提交:
```css
function func() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
```
以上 JavaScript 代码可以通过 HTML 代码来调用:
```css
<form name="myForm" action="demo_form.php" οnsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
```
## JavaScript 验证输入的数字
JavaScript 常用于对输入数字的验证:
```css
function myFunction() {
var x;
var text = "输入正确";
//Get the value of input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number, or x is less than one, or x is grather than 10 then
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
}
document.getElementById("demo").innerHTML = text;
}
```
## HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交:
```css
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
```
在JavaScript中,你可以通过以下方式处理表单:
## 获取表单元素的引用:
```css
var form = document.querySelector('form');
```
## 监听表单提交事件:
```css
form.addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 在这里可以处理表单提交的逻辑
});
```
## 获取表单中的输入值:
```css
var inputElement = document.querySelector('input[type="text"]');
var value = inputElement.value;
```
## 设置表单中的输入值:
```css
inputElement.value = '新的数值';
```
## 总结
通过以上方法,你可以在JavaScript中处理表单的提交事件、获取和设置表单中的输入值,从而实现对表单的有效控制和交互。