JavaScript 表单验证
以下实例代码用于判断表单字段(fname)值是否存在,如果存在,则弹出信息,否则阻止表单提交:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
var x = document.forms.myForm.fname.value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
<form onsubmit="return validateForm()" name="myForm">
名字:<input type="text" name="fname" />
<input type="submit" value="提交" />
</form>
<script> function validateForm()
{
var x=document.getElementsByName("fname")[0].value;
if(x==null||x=="")
{
alert("需要输入名字");
return false;
}
}
</script>
注意:
1.一个元素定义了id,引用该元素时直接用id属性,而name通常用在 form中,且必须由document.form.***而来,也就是说,name属性定义的元素在脚本中是document对象的子对象。
2.document.getElementById() 得到的是单个元素 ;document.getElementsByName() 得到的是数组;
即document.getElementById(“id”)
document.getElementsByName(“name”)[0]
3.表单元素 (form input textarea select) 与框架元素 (iframe frame) 用 name这些元素都与表单(框架元素作用于form的target) 提交有关,在表单的接收页面只接收有 name的元素,赋ID的元素通过表单是接收不到值的
4.只能赋 ID不能赋 name的元素 除去与表单相关的元素都只能赋 ID) body li table tr td th p div span pre dl dt dd font b 等等。
JavaScript 验证输入的数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>JavaScript 验证输入</h1>
<p>请输入 1 到 10 之间的数字:</p>
<input id="numb">
<button type="button" onclick="myFunction()">提交</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// 获取 id="numb" 的值
x = document.getElementById("numb").value;
// 如果输入的值 x 不是数字或者小于 1 或者大于 10,则提示错误 Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "输入错误";
} else {
text = "输入正确";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
HTML 表单自动验证
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
<p>点击提交按钮,如果输入框是空的,浏览器会提示错误信息。</p>
</body>
</html>
数据验证
1.数据验证用于确保用户输入的数据是有效的
2.典型的数据验证有:
必需字段是否有输入?
用户是否输入了合法的数据?
在数字字段是否输入了文本?
3.服务端数据验证是在数据提交到服务器上后再验证;
客户端数据验证 side validation是在数据发送到服务器前,在浏览器上完成验证。
HTML 约束验证
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于:
HTML 输入属性
CSS 伪类选择器
DOM 属性和方法