用JavaScript验证表单

最新推荐文章于 2024-08-05 21:28:12 发布

勤奋赛过天赋

最新推荐文章于 2024-08-05 21:28:12 发布

阅读量457

点赞数

分类专栏： HTML 文章标签： JavaScript验证表单

本文链接：https://blog.csdn.net/qq_43328996/article/details/93391387

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最简单的表单验证----禁止空白的必填项目

最简单表单的HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>最简单表单的HTML结构</title>
</head>
<body>
  <form 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="注册"/>
  </form>
</body>
</html>

2绑定验证功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>最简单表单的HTML结构</title>
</head>
<body>
  <form 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();"/>
  </form>
<script>
    var eg={};//声明一个对象，当做命名空间来使用，本书默认的范例都会以此来方便管理
    //定义一个公共函数来获取指定id元素，减少代码量，提高代码复用率
    eg.$=function(id){
        return document.getElementById(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;
        }
        return true;
    };
</script>
</body>
</html>

绑定验证的另一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>最简单表单的HTML结构</title>
</head>
<body>
  <form method="post" action="" onsubmit="return eg.regCheck();">
      账号:<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="注册" />
  </form>
<script>
    var eg={};//声明一个对象，当做命名空间来使用，本书默认的范例都会以此来方便管理
    //定义一个公共函数来获取指定id元素，减少代码量，提高代码复用率
    eg.$=function(id){
        return document.getElementById(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;
        }
        return true;
    };
</script>
</body>
</html>