用JavaScript验证表单

最新推荐文章于 2024-09-27 15:27:45 发布

goodbye road

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量402

点赞数 11

文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/bll1355/article/details/140507058

版权

一、最简单表单的HTML结构

<from>表单标签，用户可以通过表单向服务器提交信息，从而实现用户与服务器的交互。常见的属性有：

1、action，指定了用户提交的目标URL，即用户所填写的信息都被提交到此URL；

2、method，规定在提交表单时所用的 HTTP 方法（默认：get）；

3、name，定义了表单的名称，在多表单时可以起到标示表单的作用；

4、enctype，定义了在提交表单时使用的内容类型。常见的值有application/x-www-from-urlencoded（默认值）和multipart/form-data（用于上传文件）；

<input>文本框标签，可以包含在表单标签内，用于用户填写信息，常见的属性有：

1、text，代表普通文本框；

2、password，代表密码文本框；

3、email，代码邮箱文本框；

4、radio，单选框，多个选项标签都需要设置相同的name属性才能进行单选；

5、submit，提交按钮，点击提交后表单所有的内容将提交到指定URL；

6、name，为文本框提供唯一的名称，这个名称在表单提交后被服务器用来识别和处理特定的表单字段数据，只有加了name属性的标签元素才会提交到服务器；

7、id，通过id属性，‌可以方便地使用JavaScript或其他前端框架来获取该输入框元素，‌并对其进行各种操作，‌如修改样式、‌获取或设置输入框的值等；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最简单表单的HTML结构</title>
</head>
<body>
    <from method="post" action="">
        账户:<input type="text" name=""/><br/><br/>
        密码:<input type="password" name=""/><br><br/>
        确认:<input type="password" name=""/><br/><br/>
        <input type="submit" value="注册"/>
    </from>
</body>
</html>

这个就是注册表单的基本代码，但是目前我们还做不了任何有用的事情。比如单击注册按钮后发布的数据，系统后台是接收不到的，因为input标签中的name还未指定参数。

二、简单绑定验证功能

在JavaScript中，我们可以使用onclick属性来绑定点击事件。通过给元素设置onclick属性，可以指定一个JavaScript函数作为事件处理程序，当用户点击该元素时，该函数将被调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单绑定验证表单</title>
</head>
<body>
    <from method="post" action="">
        账户:<input type="text" name="" id="userid"/><br/><br/>
        密码:<input type="password" name="" id="userpwd"/><br><br/>
        确认:<input type="password" name="" id="userpwd2"/><br/><br/>
        <input type="submit" value="注册" onclick="return eg.regCheck();"/>
    </from>
    <script>
        var eg = {};//声明一个对象，当作命名空间来使用
        eg.$ = function(id){
            return document.getElementById(id);
        }//定义一个公共函数来获取指定id元素，减少代码量，提高代码复用率
        eg.regCheck = function(){
            var uid = eg.$("userid");
            var upwd = eg.$("userpwd");
            var upwd2 = eg.$("userpwd2");
            if(uid.value ==""){
                alert("账户不能为空！");
                return false;
            }
            if(upwd.value ==""){
                alert("密码不能为空！");
                return false;
            }
            if(upwd.value != upwd2.value){
                alert("两次密码输入不相同！");
                return false;
            }
        }
    </script>
</body>
</html>

三、用正则表达式来验证复杂的格式要求

具体的JavaScript正则符号及其说明请自行搜索。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正则表达式验证表单</title>
</head>
<body>
    <from method="post" action="">
        账户:<input type="text" name="" id="userid"/><br/><br/>
        密码:<input type="password" name="" id="userpwd"/><br><br/>
        确认:<input type="password" name="" id="userpwd2"/><br/><br/>
        邮箱:<input type="text" name="" id="email"/><br/><br/>
        <input type="submit" value="注册" onclick="return eg.regCheck();"/>
    </from>
    <script>
        var eg = {};//声明一个对象，当作命名空间来使用
        eg.$ = function(id){
            return document.getElementById(id);
        }//定义一个公共函数来获取指定id元素，减少代码量，提高代码复用率
        eg.regCheck = function(){
            var uid = eg.$("userid");
            var upwd = eg.$("userpwd");
            var upwd2 = eg.$("userpwd2");
            var email = eg.$("email")
            if(uid.value ==""){
                alert("账户不能为空！");
                return false;
            }
            if(upwd.value ==""){
                alert("密码不能为空！");
                return false;
            }
            if(upwd.value != upwd2.value){
                alert("两次密码输入不相同！");
                return false;
            }
            if(!/^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d\-]*\.)+[A-Za-z]{2,4}$/.test(email.value)){
                alert("请输入正确的邮箱！");
                eg.console.error();
                return false;
            }//^[A-Za-z\d]是以字母或者数字开头
             //[A-Za-z\d\-_\.]*是允许字母、数字、下划线、中横线和点出现0次以上
             //([A-Za-z\d]+[A-Za-z\d\-]*\.)是以字母开头+只允许字母、数字、中横线和点，可以出现1次以上
             //[A-Za-z]{2,4}$是以字母结尾长度2~4个字母

        }

    </script>
</body>
</html>