HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(myName)值是否存在， 如果不存在，就d出信息，阻止表单提交：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript表单验证title>
head>
<body>
<script>
function validateForm()
{
var x=document.forms["myForm"]["myName"].value;//获取输入框的值
if(x==""||x==null)//是空串或null
{
alert("需要输入名字！");
return false;
}
}
script>
<form name="myForm" action="demo" onsubmit="return validateForm()" method="post">
姓名：<input type="text" name="myName">
<input type="submit" name="提交">
form>
body>
html>
效果图：
JavaScript 常用于对输入数字的验证：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript验证输入的数字title>
head>
<body>
<script>
function isNumber()
{
var x=document.forms["myForm"]["number"].value;
if(x>=1&&x<=10)
{
alert("输入正确");
return false;
}else
{
alert("输入错误！");
return false;
}
}
script>
<form name="myForm" action="demo" onsubmit="return isNumber()" method="post">
请输入1~10之间的数字：<br>
<input type="text" name="number">
<input type="submit" name="提交">
form>
body>
html>
效果图：
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
即自动d出提示框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML表单自动验证title>
head>
<body>
<form action="demo" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
form>
body>
html>
下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>email验证title>
head>
<body>
<script>
function isRightEmail()
{
var x=document.forms["myForm"]["myEmail"].value;
var a=x.indexOf('@');
var d=x.indexOf('.');
if(a<1||d<a+2||d+2>x.length)
{
alert("不是一个有效的email地址！");
return false;//停留在原页面，不会打开一个新的网页
}else
{
return false;//正常网页应该正常提交，这里只是防止打开新网页
}
}
script>
<form name="myForm" action="demo" onsubmit="return isRightEmail()" method="post">
email:<input type="text" name="myEmail">
<input type="submit" value="提交">
form>
body>
html>
效果图：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）