JavaScript 表单

最新推荐文章于 2017-12-28 22:10:01 发布

小小小花儿

最新推荐文章于 2017-12-28 22:10:01 发布

阅读量279

点赞数

本文链接：https://blog.csdn.net/ly_twt/article/details/77503813

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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 属性和方法

小小小花儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 表单

JavaScript 表单验证以下实例代码用于判断表单字段(fname)值是否存在，如果存在，则弹出信息，否则阻止表单提交：<!DOCTYPE html><html><head><meta charset="utf-8"><script>function validateForm() { var x = document.forms["myForm"]["fname"].value
复制链接

扫一扫