【零基础学习web前端】JavaScript 表单

Amy · 发表于 2018-12-22 12:24:10

【零基础学习web前端】教程目录导航

http://www.sufeinet.com/thread-24027-1-1.html

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 14:05:08

我只是路过打酱油的。

竹林风 · 发表于 2018-12-22 16:13:13

真是难得给力的帖子啊。

liu · 发表于 2018-12-22 16:25:58

感恩无私的分享与奉献

		自动登录	找回密码
密码			马上注册

[JavaScript] 【零基础学习web前端】JavaScript 表单

相关帖子