Js 最原始的表单验证 |将数据提交到百度搜索

最新推荐文章于 2022-09-08 13:27:23 发布

原创最新推荐文章于 2022-09-08 13:27:23 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

JQuery 同时被 2 个专栏收录

53 篇文章

订阅专栏

JavaScript

40 篇文章

订阅专栏

本文介绍如何在HTML表单中集成表单验证逻辑，并将验证通过的数据提交至百度进行搜索。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <!--注意是在form1中假如一个onsubmit事件-->
    <!--onsubmit：事件名，表示表单提交的时候所触发的事件。如果checkForm()这个函数返回一个true表示表单都验证通过了，事件继续，如果返回false的话 onsubmit=false的时候表单不会被提交，即事件终止-->
    <form name="form1" onsubmit="return checkForm()">
        <table style="margin:20px auto">
            <tr><td>用户名：</td><td><input name="txtUserName" id="txtUserName" type="text" /></td></tr>
            <tr><td>密码：</td><td><input name="txtPwd" type="text" /></td></tr>
            <tr><td>手机：</td><td><input name="txtPhome" type="text" /></td></tr>
            <tr><td>邮箱：</td><td><input name="txtEmail" id="txtEmail" /></td></tr>
            <tr><td>年龄：</td><td><input name="txtAge" id="txtEmail" /></td></tr>

            <tr><td></td><td><input type="submit" value="提交" /></td></tr>
        </table>
    </form>
</body>
</html>
<script type="text/javascript">
    function checkForm() {
        if (document.form1.txtUserName.value == "")
        {
            alert("用户名不能为空！")
            return false
        }
        if (document.form1.txtUserName.value.length < 2 || document.form1.txtUserName.value.length > 100)
        {
            alert("用户名不规范！")
            return false;
        }

        if (document.form1.txtAge.value != "") {
            var reg = new RegExp("^1{0,1}[0-9]{1,2}$");           
            reg = /^1{0,1}[0-9]{1,2}$/gi;

            //或者直接这样写：var reg=/在这里面写正则/gi; (注意以gi结尾)   例如:var reg=/^1{0,1}[0-9]{1,2}$/gi;

            var v = document.form1.txtAge.value;
            if (!reg.test(v)) {
                alert("年龄输入不正确")
            }
        }
        else { alert("年龄不能为空") };
        return true;
    }
</script>

将数据提交到百度搜索

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form action="http://www.baidu.com/s">
        <input type="text"  name="wd" value=""/>
        <input type="submit"value="百度一下" />
    </form>
</body>
</html>