JavaScript对表单的一些常用操作（表单验证）

最新推荐文章于 2024-02-06 08:14:42 发布

JPC客栈

最新推荐文章于 2024-02-06 08:14:42 发布

阅读量718

点赞数 2

分类专栏：前端学习笔记HTMLCSSJavaScript

本文链接：https://blog.csdn.net/qq_57987156/article/details/124916274

版权

JavaScript HTML 表单验证电子邮件验证数字验证

关键词由CSDN通过智能技术生成

前端学习笔记HTMLCSSJavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、JavaScript表单验证

HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(myName)值是否存在，如果不存在，就弹出信息，阻止表单提交：

<!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>

效果图：
在这里插入图片描述

2、JavaScript 验证输入的数字

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>

效果图：
在这里插入图片描述

3、HTML 表单自动验证

HTML 表单验证也可以通过浏览器来自动完成。

如果表单字段 (fname) 的值为空, required 属性会阻止表单提交：
即自动弹出提示框

<!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>

在这里插入图片描述

4、E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。
意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

<!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>