欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

用JavaScript验证表单

程序员文章站 2022-07-15 16:28:22
...

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

最简单表单的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>

上一篇： el-form 表单非必填验证

下一篇： 对于多组数据输入输出的基础题目

推荐阅读