DHTML技术---前端用户提交信息验证和表单提交控制+完整表单验证代码实例

最新推荐文章于 2020-11-24 09:00:50 发布
最新推荐文章于 2020-11-24 09:00:50 发布
阅读量544 收藏 3
点赞数 1
分类专栏： J2EE 文章标签： html dhtml 前端 密码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37720904/article/details/72251996
版权

前端用户提交信息验证
前端和用户交互，对于用户提交的信息，一定是需要验证的。比如一个注册页面，要验证用户名是否非法、用户两次输入密码是否一致等。而且我们在验证的时候，最好是当用户输入完用户名就直接提示用户，用户名是否合法。这些细节。大致如图
这里写图片描述
下面是代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>表单提交验证</title>
        <style type="text/css">
            input {
                    width: 150px;
                    height: 20px
            }
            body {
                    background-color:   #00FFFF;
            }
        </style>
        <script type="text/javascript">
            function check1(){
            //验证用户名是否合法：至少有4个连着英文字母
                var reg = /[a-z]{4}/i;
                //拿到用户输入的value
                var value= document.getElementById("id1").value;

                    var sUser = document.getElementById("spanUser");
                if(reg.test(value)){//成功在后面显示绿色字体合法
                    sUser.innerHTML ="用户名可以使用".fontcolor("green");
                }else{
                    sUser.innerHTML ="用户名不合法".fontcolor("red");
                }
            }
            function check2(){
                //验证密码是否合法：全为数字，长达至少6位
                var reg = /\d{6,8}/;
                //拿到用户输入的value
                var value= document.getElementById("id2").value;

                    var sUser = document.getElementById("spanPwd1");
                if(reg.test(value)){//成功在后面显示绿色字体合法
                    sUser.innerHTML ="密码可以使用".fontcolor("green");
                }else{
                    sUser.innerHTML ="密码长度不合法".fontcolor("red");
                }
            }
            function check3(){
            //拿到第一次输入的密码
                var pwd1  = document.getElementById("id2").value;
            //拿到第二次密码
                var pwd2 = document.getElementById("id3").value;
                var sUser = document.getElementById("spanPwd2");
                if(pwd2==pwd1){
                    sUser.innerHTML ="恭喜，密码可用".fontcolor("green");
                }else{
                    sUser.innerHTML ="两次密码不一致".fontcolor("red");
                }
            }
        </script>
    </head>
    <body> 
        <form action="form1.html">
            <br>用户名：&nbsp;<input id="id1" type="text" onblur="check1()" /><span id="spanUser"></span><br/>
            密码：&nbsp;&nbsp;<input id="id2" type="password" onblur="check2()"/><span id="spanPwd1"></span><br/>
            确认密码：<input id="id3" type="password" onblur="check3()"/><span id="spanPwd2" ></span><br/>
            <input type="submit" value="注册">
        </form>
    </body>
</html>

这个时候我们发现一个很大的问题：即使用户输入的信息有误、非法。我们仅仅是提示了用户信息非法，但是我们并没有控制表单提交，当信息非法时，照样可以提交。这个时候就需要我们控制一下。有两种方式：
第一种方式：提交前用一个函数控制
主要是把表单那儿改一下就好了

<form action="form1.html" onsubmit="return checkForm();">

这个时候非法的就提交不了了
这里写图片描述

整页面代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>表单提交验证</title>
        <style type="text/css">
            input {
                    width: 150px;
                    height: 20px
            }
            body {
                    background-color:   #00FFFF;
            }
        </style>
        <script type="text/javascript">
        // 3个用来记录 用户输入信息是否合法的 变量
            var boo1=false;
            var boo2=false;
            var boo3=false;
            function check1(){
            //验证用户名是否合法：至少有4个连着英文字母
                var reg = /[a-z]{4}/i;
                //拿到用户输入的value
                var value= document.getElementById("id1").value;

                    var sUser = document.getElementById("spanUser");
                if(reg.test(value)){//成功在后面显示绿色字体合法
                    sUser.innerHTML ="用户名可以使用".fontcolor("green");
                    boo1 = true;
                }else{
                    sUser.innerHTML ="用户名不合法".fontcolor("red");
                    boo1 = false;
                }
            }
            function check2(){
                //验证密码是否合法：全为数字，长达至少6位
                var reg = /\d{6,8}/;
                //拿到用户输入的value
                var value= document.getElementById("id2").value;

                    var sUser = document.getElementById("spanPwd1");
                if(reg.test(value)){//成功在后面显示绿色字体合法
                    sUser.innerHTML ="密码可以使用".fontcolor("green");
                    boo2 = true;
                }else{
                    sUser.innerHTML ="密码长度不合法".fontcolor("red");
                    boo2 = false;
                }
            }
            function check3(){
            //拿到第一次输入的密码
                var pwd1  = document.getElementById("id2").value;
            //拿到第二次密码
                var pwd2 = document.getElementById("id3").value;
                var sUser = document.getElementById("spanPwd2");
                if(pwd2==pwd1){
                    sUser.innerHTML ="恭喜，密码可用".fontcolor("green");
                    boo3 = true;
                }else{
                    sUser.innerHTML ="两次密码不一致".fontcolor("red");
                    boo3 = false;
                }
            }
            function checkForm(){
                //必须要保证前面的都是合法才能提交，所以需要几个全局变量来他们是否和发
                if(boo1&&boo2&&boo3){
                    return true;
                }else{
                    return false;
                }
            }
        </script>
    </head>
    <body> 
        <form action="form1.html" onsubmit="return checkForm();">
            <br>用户名：&nbsp;<input id="id1" type="text" onblur="check1()" /><span id="spanUser"></span><br/>
            密码：&nbsp;&nbsp;<input id="id2" type="password" onblur="check2()"/><span id="spanPwd1"></span><br/>
            确认密码：<input id="id3" type="password" onblur="check3()"/><span id="spanPwd2" ></span><br/>
            <input type="submit" value="注册">
        </form>
    </body>
</html>

第二种方式： //通过调用dom中的 form对象的submit()手动提交表单

我仅仅把与前面更改的地方提上
第一个 把 form改了

// 修改前
<form action="form1.html" onsubmit="return checkForm();">
// 修改后
<form action="form1.html" id="formid">
// 修改前
<input type="submit" value="注册">
// 修改后
<input type="submit" value="注册" onclick="mySubmit()">

就下来就mySubmit方法代码

function mySubmit(){
                var formNode= document.getElementById("formid");
                //必须要保证前面的都是合法才能提交，所以需要几个全局变量来他们是否和发
                if(boo1&&boo2&&boo3){
                    formNode.submit();
                };
            }

整片代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>表单提交验证</title>
        <style type="text/css">
            input {
                    width: 150px;
                    height: 20px
            }
            body {
                    background-color:   #00FFFF;
            }
        </style>
        <script type="text/javascript">
        // 3个用来记录 用户输入信息是否合法的 变量
            var boo1=false;
            var boo2=false;
            var boo3=false;
            function check1(){
            //验证用户名是否合法：至少有4个连着英文字母
                var reg = /[a-z]{4}/i;
                //拿到用户输入的value
                var value= document.getElementById("id1").value;

                    var sUser = document.getElementById("spanUser");
                if(reg.test(value)){//成功在后面显示绿色字体合法
                    sUser.innerHTML ="用户名可以使用".fontcolor("green");
                    boo1 = true;
                }else{
                    sUser.innerHTML ="用户名不合法".fontcolor("red");
                    boo1 = false;
                }
            }
            function check2(){
                //验证密码是否合法：全为数字，长达至少6位
                var reg = /\d{6,8}/;
                //拿到用户输入的value
                var value= document.getElementById("id2").value;

                    var sUser = document.getElementById("spanPwd1");
                if(reg.test(value)){//成功在后面显示绿色字体合法
                    sUser.innerHTML ="密码可以使用".fontcolor("green");
                    boo2 = true;
                }else{
                    sUser.innerHTML ="密码长度不合法".fontcolor("red");
                    boo2 = false;
                }
            }
            function check3(){
            //拿到第一次输入的密码
                var pwd1  = document.getElementById("id2").value;
            //拿到第二次密码
                var pwd2 = document.getElementById("id3").value;
                var sUser = document.getElementById("spanPwd2");
                if(pwd2==pwd1){
                    sUser.innerHTML ="恭喜，密码可用".fontcolor("green");
                    boo3 = true;
                }else{
                    sUser.innerHTML ="两次密码不一致".fontcolor("red");
                    boo3 = false;
                }
            }
            /*function checkForm(){
                //必须要保证前面的都是合法才能提交，所以需要几个全局变量来他们是否和发
                if(boo1&&boo2&&boo3){
                    return true;
                }else{
                    return false;
                }
            }*/
            function mySubmit(){
                var formNode= document.getElementById("formid");
                //必须要保证前面的都是合法才能提交，所以需要几个全局变量来他们是否和发
                if(boo1&&boo2&&boo3){
                    formNode.submit();
                };
            }
        </script>
    </head>
    <body> 
        <!-- 
        <form action="form1.html" onsubmit="return checkForm();">
         -->
        <form action="form1.html" id="formid">
            <br>用户名：&nbsp;<input id="id1" type="text" onblur="check1()" /><span id="spanUser"></span><br/>
            密码：&nbsp;&nbsp;<input id="id2" type="password" onblur="check2()"/><span id="spanPwd1"></span><br/>
            确认密码：<input id="id3" type="password" onblur="check3()"/><span id="spanPwd2" ></span><br/>
            <!--
             <input type="submit" value="注册" > 
             -->
            <input type="submit" value="注册" onclick="mySubmit()">
        </form>
    </body>
</html>

接下来是一个完整表单验证代码实例，供大家学习交流！！

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>表单校验与提交的完整示例</title>
        <script type="text/javascript">
          /*
           function checkUser(){
              var oUserNode = document.getElementsByName("user")[0];
              var val = oUserNode.value;
              var reg = /[a-z]{4}/i;
              var oUserSpan = document.getElementById("userspan");
              var flag = reg.test(val);
              if(flag){
                 oUserSpan.innerHTML="用户名正确".fontcolor("green").bold();
              }else{
                 oUserSpan.innerHTML="用户名错误".fontcolor("red").bold();
              }
              return flag;
           }
           */

           function check(name,reg,spanId,okInfo,errInfo){
              var oUserNode = document.getElementsByName(name)[0];
              var val = oUserNode.value;
              var oUserSpan = document.getElementById(spanId);
              var flag = reg.test(val);
              if(flag){
                 oUserSpan.innerHTML=okInfo.fontcolor("green").bold();
              }else{
                 oUserSpan.innerHTML=errInfo.fontcolor("red").bold();
              }
              return flag;
           }

           function checkUser(){
              var reg = /[a-z]{4}/i;
              return check("user",reg,"userspan","用户名正确","用户名错误");
           }
           function checkPwd(){
              var reg =new RegExp("^[\\w]{6,9}$");
              return check("pwd",reg,"pwdspan","密码格式正确","密码格式错误");
           }
           function checkMail(){
              var reg =/^\w+@\w+(\.\w+)+$/i;
              return check("mail",reg,"mailspan","邮箱格式正确","邮箱格式错误");
           }
           function checkPwd2(){
              //分别获取两个密码：pwd, pwd2
              var pwd = document.getElementsByName("pwd")[0].value;
              var pwd2 = document.getElementsByName("pwd2")[0].value;
              //获取给用户显示提示信息的span
              var oSpanNode = document.getElementById("pwdspan2");
              var flag;
              if(pwd==pwd2){//※JS中判断两个字符串是否相等用"=="，和Java不一样
                 oSpanNode.innerHTML="";
                 flag=true;
              }else{
                 oSpanNode.innerHTML="两次密码不一致".fontcolor("red").bold();
                 flag = false;
              }

              return flag;
           }

           function mySubmit(){
              alert(checkUser()+","+ checkPwd() +","+ checkPwd2()  +","+  checkMail() );
              if(checkUser() && checkPwd() && checkPwd2() &&  checkMail()){
                 userinfo.submit();
              }
           }
        </script>
    </head>
    <body>
        <h2>表单校验--较完整的示例</h2>
        <form id="userinfo">
            用户名:<input type="text" name="user" onblur="checkUser();">
            <span id="userspan"></span> <br/>

            密 码:<input type="text" name="pwd" onblur="checkPwd();">
            <span id="pwdspan"></span> <br/>

            确认密码:<input type="text" name="pwd2" onblur="checkPwd2();">
            <span id="pwdspan2"></span> <br/>

            邮件地址:<input type="text" name="mail" onblur="checkMail();">
            <span id="mailspan"></span> <br/>

            <input type="button" value="注册"  onclick="mySubmit();">
        </form>


    </body>
</html>
海那边的小萌男
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
个人信息提交表单代码.zip
07-04
个人信息提交表单代码是一款原生js表单美化制作注册个人信息提交表单代码。
在表单提交之前，判断表单的填写是否完整
懒虫的博客
05-04 1181
**在提交按钮加事件onclick()=“return a()” 在script加函数 a() 判断** 我在onclick事件中加了一个返回值，这样当浏览器窗口弹出警告框提示我们漏填信息，我们点击确定按钮时，浏览器不会清除我们原本填写好的信息。 ...
提交表单的检查代码
php菜鸟技术天地
06-02 760
function FormCheck() { if (document.Form1.user.value =="") { alert("请填写您的用户名！"); document.Form1.user.focus(); return false; } var filter=/^\s*[.A-Za-z0-9_-]{5,15}\s*$/; if (!filter.test(document.Form1
web前端 | 博客（八）用户信息修改功能
让黛马跑起来
01-06 9484
用户信息修改功能 当点击用户后面的按钮时，要跳转到用户信息修改页面。而修改和添加实际上是同一个页面。 要区分跳转后是添加操作还是修改操作，在于携带的参数。 如果是添加操作，那就直接跳转过去；如果是修改操作，那就携带当前用户的di，通过get的方式传递过去。这样，在跳转到用户编辑页面的时候，可以通过get方式中是否有id参数，来区分到底是添加操作还是修改操作。如果是修改操作，还需要将要修改的用户信息...
框架中后端服务两种重复提交策略实现以及前端重复提交控制
阿索的专栏
04-24 1229
一、概述 框架中后端服务两种重复提交策略实现方式 1、基于token方式： 该种方式在请求页面信息时需要在session中预置uuid，并且需要在页面中隐藏该uuid值，在在页面执行保存请求中携带uuid值，后端拦截器中判断请求中携带的uuid和session中的uuid是否相等，且有一方的uuid不存在都判断为重复提交 2、基于组装请求唯一标志方式：将请求携带的参数params、url、当...
JAVA上百实例源码以及开源项目源代码
09-17
　Java非对称加密源程序代码实例，本例中使用RSA加密技术，定义加密算法可用 DES,DESede,Blowfish等。 　设定字符串为“张三，你好，我是李四” 　产生张三的密钥对(keyPairZhang) 　张三生成公钥(publicKeyZhang...
js操纵跨frame的三级联动select下拉选项实例介绍
12-12
考察学生关于frame、浏览器对象，以及表单控件的概念，javascript事件触发机制和程序设计， 以及用CSS来组织文字展示的掌握程度，使学生对DHTML有更加深刻的理解。 实验内容【必做】 （１）建立一个包含三个frame的...
JAVA上百实例源码以及开源项目
01-03
　Java非对称加密源程序代码实例，本例中使用RSA加密技术，定义加密算法可用 DES,DESede,Blowfish等。 　设定字符串为“张三，你好，我是李四” 　产生张三的密钥对(keyPairZhang) 　张三生成公钥(publicKeyZhang...
PHP和MySQL Web开发第4版pdf以及源码
10-13
6.7.1 通过继承使用private和protected访问修饰符控制可见性 6.7.2 重载 6.7.3 使用final关键字禁止继承和重载 6.7.4 理解多重继承 6.7.5 实现接口 6.8 类的设计 6.9 编写类代码 6.10 理解PHP面向对象新的...
SSM超市进销存管理系统
qq_80213251的博客
11-24 1040
开发环境： Eclipse ,MYSQL,JDK1.8,Tomcat 7 涉及技术点： MVC模式、SpringMvc、Mybatis、Spring、bootstrap、HTML、JavaScript、CSS、JQUERY、log4j、Ajax、maven等 系统采用Mybatis框架实现ORM对象关系映射，前台JSP实现，后台springMvc映射，使用Spring框架进行整合。适合学习J2EE的一段时间的熟手，代码思路清晰，注解详细，数据库用的是mysql5.1，服务器用的tomcat7，JDK版本1.
form的onsubmit事件--表单提交前的验证最佳实现方式
笔记
11-11 8625
form的onsubmit事件--表单提交前的验证最佳实现方式    今天遇到了一个问题，页面中include了很多的公共页面（都是没有form的），并且里面好多的地方都是自行提交的（页面中加入一个type=“submit”域，然后js中写入sumbit.click来执行提交的）。但我需要在每次提交前都要验证一下表单中的填写是否符合要求，如果我给每个提交的地方都添加验证函数的调用，那
Ajax+js 和 Ajax+Jquery实现异步校验
玲儿叮当想
03-24 344
web.html&lt;script type="text/javascript" src="${ pageContext.request.contextPath }/03_ajax_regist/regist.js"&gt;&lt;/script&gt; &lt;tr&gt; &lt;td&gt;用户名&lt;/td&gt; &lt;td&gt;&lt;input
用户信息提交
qq_44109821的博客
12-20 215
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册</title> <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"><...
手写表单及h5表单验证举例
mia1106的博客
06-28 2141
表单是一个很重要的概念，这里涉及到收集数据以及验证数据，以及表单的用户体验。一般ui框架会有封装好的这些功能。 这里复习一下手写表单，顺带复习一下表单的基本属性，基本样式和h5的表单验证。 一个表单基本包含一个html结构，即表单结构，针对html的样式，表单验证，表单提交。这里会把前三项的相关代码贴出来。大家组合到一个html页面之中，就可以形成一个完整的功能。 表单基本结构 一般包含 ...
前端学习（2421）：展示当前登录用户
歌谣的博客
10-12 370
app.vue <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style lang="less"> </style> index.vue <template> ...
Thymeleaf开发实践指南：你需要的都在这里！
空山新雨后，天气晚来秋
10-14 1170
上行若水，大行至简 目录 前言 判断与超链提交示例 输入框提交 遍历获取的后端数据 高级遍历 图片上传 完整表单提交 页面引入js、css文件 页面引入th标签使用（必须） 结合后端进行分页 公共代码的分离与引用 js中引入thymeleaf 运算符 解析与展示时间格式 th标签多参数传到js th标签字符串拼接 前言 thymeleaf是spring官方推荐............
表单验证后提交 两种方式 2016/07/10
..G的博客
07-10 9626
————————————————前面比较啰嗦，具体方法在最后———————————— 今天使用ajax，在增加用户，点击保存后，先不提交，先判断填写的信息，然后确定是否提交。 这是做的第一个练手的项目，之前跟着视频学习，学到项目视频被加密了，只有项目第一天的视频可以看，不过第一天收获也很大，项目刚开始时候使用S2SH怎么一步步整合。都是先看一遍，再看着写一遍，再自己写一遍。学到的挺多的。 尽
圣诞树代码3dhtml
最新发布
12-25
以下是一个简单的圣诞树的3D HTML代码示例： ...<!...它使用矩形和三角形来绘制树干和树叶，并通过递归调用自身来创建树的分支。你可以将这段代码保存为一个HTML文件，然后在浏览器中打开以查看效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值