【零基础学习web前端】JavaScript 表单
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
JavaScript 表单验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。
被 JavaScript 验证的这些典型的表单数据有：
- 用户是否已填写表单中的必填项目？
- 用户输入的邮件地址是否合法？
- 用户是否已输入合法的日期？
- 用户是否在数据域 (numeric field) 中输入了文本？
必填（或必选）项目
下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：
[HTML] 纯文本查看 复制代码 <head>
<script type="text/javascript">
function validate_required(field, alerttxt) {
with (field) {
if (value == null || value == "")
{ alert(alerttxt); return false }
else { return true }
}
}
function validate_form(thisform) {
with (thisform) {
if (validate_required(email, "请输入邮箱！") == false)
{ email.focus(); return false }
}
}
</script>
</head>
<body>
<form action="submitpage.htm" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="提交">
</form>
</body>
当输入框为空时点击按钮，会弹出提示框
JavaScript 输入验证
JavaScript 常用于对输入数字的验证：
[HTML] 纯文本查看 复制代码 <h1>JavaScript 验证输入</h1>
<p>请输入 1 到 10 之间的数字：</p>
<input id="numb">
<button type="button">提交</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>
当输入超过10的数字时，提示效果：
E-mail 验证
E-mail验证是函数检查输入的数据是否符合电子邮件地址的基本语法。
即输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：
[HTML] 纯文本查看 复制代码 <head>
<script type="text/javascript">
function validate_email(field, alerttxt) {
with (field) {
apos = value.indexOf("@")
dotpos = value.lastIndexOf(".")
if (apos < 1 || dotpos - apos < 2)
{ alert(alerttxt); return false }
else { return true }
}
}
function validate_form(thisform) {
with (thisform) {
if (validate_email(email, "不是有效的电子邮件地址!") == false)
{ email.focus(); return false }
}
}
</script>
</head>
<body>
<form action="submitpage.htm" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="提交">
</form>
</body>
当输入错误的邮件格式或者空数据时，弹出提示：
HTML 表单自动验证
HTML 表单验证也可以通过浏览器来自动完成。
如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
[HTML] 纯文本查看 复制代码 <form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
效果：
| 
窥视卡
雷达卡
发表于 2018-12-22 12:24:10
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2018-12-22 14:05:08
