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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

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

  • 相关阅读:
    机器学习笔记 十六：基于Boruta算法的随机森林（RF）特征重要性评估
    基于springboot在线考试报名系统毕业设计源码031706
    SpringBoot的学习
    征信查询自动化软件机器人，提升效率、降低错误率
    使用docker部署mysql8.0+zabbix5.0
    【Linux】组管理命令
    JavaScript-HelloWorld、浏览器控制台使用、数据类型
    【教3妹学算法】特殊数组的特征值
    FPGA实现图像对比度自动调整，提供2套工程源码和技术支持
    为什么国外程序员的创造力比中国程序员强？
  • 原文地址：https://blog.csdn.net/qq_57987156/article/details/124916274