精华内容
下载资源
问答
  • 给网页添加表单验证
    2022-01-28 16:31:08

    FORM表单如何添加验证码(刷新变换)

    我们在自己做网站时,经常会使用到FORM表单,在FORM表单中为了防止别人频繁提交,常常会在表单里添加验证码。如下图:

    方法/步骤

    第一步:在网页的head标签上面,添加以下的JS代码;

    <script type="text/javascript">
    var code;
    function createCode()
    {
    code = "";
    var codeLength = 6; //验证码的长度
    var checkCode = document.getElementById("checkCode");
    var codeChars = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,
    'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z',
    'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //所有候选组成验证码的字符,当然也可以用中文的
    for(var i = 0; i < codeLength; i++)
    {
    var charNum = Math.floor(Math.random() * 52);
    code += codeChars[charNum];
    }
    if(checkCode)
    {
    checkCode.className = "code";
    checkCode.innerHTML = code;
    }
    }
    function validateCode()
    {
    var inputCode=document.getElementById("inputCode").value;
    if(inputCode.length <= 0)
    {
    alert("请输入验证码!");
    }
    else if(inputCode.toUpperCase() != code.toUpperCase())
    {
    alert("验证码输入有误!");
    createCode();
    }
    else
    {
    $('form').submit();
    }
    }
    </script>

    第二步:在FORM表单的HTML代码中,添加以下的HTML代码,用于填写验证码和显示验证码;

    <form id="form1" runat="server" onsubmit="validateCode()">
    <div>
    <table border="0" cellspacing="5" cellpadding="5" >
    <tr>
    <td></td>
    <td><div class="code" id="checkCode" onclick="createCode()" ></div></td>
    <td><a href="#" onclick="createCode()">看不清换一张</a></td>
    </tr>
    <tr>
    <td>验证码:</td>
    <td><input style="float:left;" type="text" id="inputCode" /></td>
    <td>请输入验证码</td>
    </tr>
    <tr>
    <td></td>
    <td><input id="Button1" onclick="validateCode();" type="button" value="确定" /></td>
    <td></td>
    </tr>
    </table>
    </div>
    </form>

    第三步:为了让网页首次加载时,显示验证码,需要在BODY添加一个载入动作;

    <body onload="createCode()">


    第四步:在CSS文件中,添加以下的CSS样式,用于控制验证码的样式;

    <style type="text/css">
    .code
    {
    background:url(code_bg.jpg);
    font-family:Arial;
    font-style:italic;
    color:blue;
    font-size:20px;
    border:0;
    padding:5px 10px;
    letter-spacing:3px;
    font-weight:bolder;
    cursor:pointer;
    width:120px;
    height:40px;
    line-height:40px;
    text-align:center;
    vertical-align:middle;
    }
    </style>

    这样就可以在自己的网页中的FROM表单中添加了验证码了,并且每刷新一次,就会显示一个新的验证码。

     

    更多相关内容
  • 动态添加input并动态添加验证方式! init状态:   点击“+”后:   验证后: 知识点: 1 先去官网下载:http://formvalidation.io/ 2 导入文件,注意事项我就不多说了在远程验证那篇我已经讲过。 3 用到的...
  • 几乎每个人都有能力将小的 JavaScript 片段添加网页中。 特点:轻量级、通用、可插入html设计、易学 JS-注册表单检测雏形 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> &...
  • 此扩展程序的公众主要是希望通过现代浏览器测试其后端表单验证的开发人员。 使用方法=============当使用表单浏览网页时,单击按钮,扩展名将禁用所有表单的验证。 它是开源的================请访问下面的网站,此...
  • JavaScript表单验证

    2022-06-14 16:40:36
    表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互...

    一.什么是表单验证?

        表单验证是JavaScript的高级选项之一.我们可以通过JavaScript在网页中对即将送往服务器的HTML表单中的输入数据进行验证.如果所输入内容与所需不符,我们就在页面中进行提示.这样就使得我们不用频繁的与服务器进行交互,减少了IO的频率,提高了效率.

    二.表单验证需求分析

    在表单验证中,我们通常使用如下的验证功能:

    • 验证用户名与密码为指定格式

      • 在验证用户名与密码时,我们通常验证用户名与密码不能为空,用户名和密码必须在指定长度范围内,用户名和密码由数字和字母组成(使用正则表达式)等等

    • 验证单选框所选内容

      • 最常见的验证单选框就是验证性别

    • 验证多选框

      • 如验证爱好等

    三.表单验证所需事件

    我们在进行表单验证时通常只会用到如下几个事件:

    onsubmit(提交表单),onclick(点击事件),onfocus(焦点聚集事件),onblur(焦点离开事件)

    • 在上述几个事件中,onsubmit()事件比较特殊,它是在我们提交表单时才会触发.这使得我们在进行表单验证时有两种主要的方式:

      • 1.在输入完成所有表单内容后点击提交按钮统一进行验证

      • 2.通过对每一个表单元素分别添加事件进行单独验证

    四.表单验证代码示例

    • 首先我们使用onsubmit()与onclick()事件进行统一提交验证:

      <!DOCTYPE html>
      <html>
          <head>
              <meta charset="utf-8">
              <title></title>
              <script type="text/javascript">
                 
                  //验证账号及密码
                  function subForm(){
                      var account = document.getElementById("accId").value;
                      var password = document.getElementById("pswId").value;
                      if(account.length<5 || account.length>14){
                          document.getElementById("spId1").innerHTML="账号应在5-14位之间!";
                          return false;
                      }else if(password.length<=0 || password.length>12){
                          document.getElementById("spId2").innerHTML="密码应在0-12位之间!";
                          return false;
                      }   
                      return true;
                  }
                  
              </script>
          </head>
          <body>
              <form action="success.html" method="get" onsubmit="return subForm()">
                  账号<input type="text" name="account" id="accId"/>
                  <span id="spId1"></span><br />
                  密码<input type="password" name="password" id="pswId" />
                  <span id="spId2"></span><br />
                  <input type="submit" value="保存"/>
              </form>
          </body>
      </html>
      ​
      • 验证的效果图如下:

    • 接下来我们示例对单独表单元素的验证:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript">
    		   
    		    //验证账号及密码
    			window.onload=function(){
    				var account = document.getElementById("accId");
    				var password = document.getElementById("pswId");
    				
    				//验证用户名,失去焦点进行验证
    				account.onblur=function(){
    					
    					if(account.value.length<4 || account.value.length>16){
    						document.getElementById("spId1").innerHTML="账号应在4-16位之间!";
    					}
    				}
    			}
    			
    		</script>
    	</head>
    	<body>
    		<form action="success.html" method="get">
    			账号<input type="text" name="account" id="accId"/>
    			<span id="spId1"></span><br />
    			密码<input type="password" name="password" id="pswId" />
    			<span id="spId2"></span><br />
    			<input type="submit" value="保存"/>
    		</form>
    	</body>
    </html>
    
    • 验证的效果图如下:  

    五.表单验证的实例

        接下来我们完成的展示使用注册表单进行验证

    首先是html部分:

    <body>
            <form class="c3" method="get">
                <table width="500px">
                    <tr class="c1">
                        <td >欢迎注册</td>
                    </tr>
                    <tr class="c2">
                        <td >用户名:<input type="text" name="account" id="accId"><span id="spaccid"></span></td>
                        
                    </tr>
                    <tr class="c2">
                        <td>密码:<input type="text" name="password" id="pasId"><span id="sppasid"></span></td>
                    </tr>
                    <tr class="c2">
                        <td>性别:<input type="radio" name="gender" value="男" id="gendId" checked="checked">男
                                <input type="radio" name="gender" value="女">女
                                <span id="spgendId"></span>
                        </td>
                    </tr>
                    <tr class="c2">
                        <td>电话:<input type="text" ></td>
                    </tr>
                    <tr class="c2">
                        <td>职业:<select name="zhiye" id="zyId">
                                    <option value="01">程序员</option>
                                    <option value="02">教师</option>
                                    <option value="03">公务员</option>
                                </select>
                        </td>
                    </tr>
                    <tr class="c2">
                        <td>爱好:<input type="checkbox" name="favorite" value="敲代码" id="fav">敲代码
                                <input type="checkbox" name="favorite" value="打游戏" id="fav">打游戏
                                <input type="checkbox" name="favorite" value="唱歌" id="fav">唱歌
                                <input type="checkbox" name="favorite" value="运动" accept="application/msexcel"id="fav">运动
                                <span id="spfavId"></span>
                        </td>
                    </tr>
                    <tr class="c2">
                        <td>地址:<textarea rows="3" cols="25" name="address"></textarea></td>
                    </tr>
                    <tr class="c1">
                        <td>填写完成后点击下面提交按钮提交表单</td>
                    </tr>
                    <tr class="c2">
                        <td><input type="button" value="提交" onclick="subForm()">
                            <input type="reset">
                        </td>
                    </tr>
                </table>
            </form>
        </body>

    接下来是css部分:

    <style>
                *{  /* 清除浏览器的默认样式*/
                    margin: 0;
                    padding: 0;
                }
                .c1{
                    
                    background-color: #2692ff;
                    color: #fff3ff;
                    text-align: center;
                    line-height: 35px;
                    ;
                }
            
                .c3{
                    width: 500px;
                    height: 400px;
                    background-color: #b4daff;
                    margin-left: auto;
                    margin-right: auto;
                    text-align: center;
                    line-height: 30px;
                }
            </style>

    最后是JavaScript部分:

    <script type="text/javascript">
                
                function subForm(){
                    
                    var account = document.getElementById("accId").value;
                    var password = document.getElementById("pasId").value;
                    var gender = document.getElementById("gendId").value;
                    var spgend = document.getElementById("spgendId").value;
                    var zhiye = document.getElementById("zyId").value;
                    var fav = document.getElementById("fav").value;
                    
                    //验证账号和密码
                    if(account.length<6 || account.length>10){
                        document.getElementById("spaccid").innerHTML="账号长度应在6-10位!";
                        return false;
                    }else if(account==null||account==" "){
                        document.getElementById("spaccid").innerHTML="账号不能为空!";
                        return false;
                    }else if(password.length<=0){
                        document.getElementById("sppasid").innerHTML="密码不能为空!";
                        return false;
                    }else{
                        document.getElementById("spaccid").innerHTML="√";
                        document.getElementById("sppasid").innerHTML="√";
                    }
                    
                    //验证爱好
                    for(var i=0;i<fav.length;i++){
                        if(fav[i].checked){
                            return true;
                        }else{
                            document.getElementById("spfavId").innerHTML="爱好至少选择一项!";
                            return false;
                        }
                    }
                }
                    
            </script>
    • 这里我们只使用提交验证的方式对部分表单元素进行了验证,感兴趣的话可以将后续为进行验证的表单元素,如: 电话,职业,地址等进行验证.

    验证效果图如下:

    展开全文
  • HTML5 Ajax验证的用户注册表单,无刷新输入判断的HTML5表单特效,界面风格漂亮,功能简洁实用,表单验证方面包括:用户名、邮箱地址判断、密码字符验证、两次密码是否一致判断、...当然其它功能就需要你自己添加了。
  • Javascript(五)javascript实现表单验证

    千次阅读 2018-08-05 21:44:48
    表单验证 为了保证用户提交的信息都是正确的,保证系统的安全性,验证是必不可少的,验证一般分为两种方式。 客户端验证:直接在客户端执行JS进行验证,验证的过程中和服务器端没有任何的交互 服务器端验证:页面...

    表单验证

    为了保证用户提交的信息都是正确的,保证系统的安全性,验证是必不可少的,验证一般分为两种方式。

    • 客户端验证:直接在客户端执行JS进行验证,验证的过程中和服务器端没有任何的交互
    • 服务器端验证:页面将验证信息传回服务器端,服务器端进行验证,并将验证的结果发送回客户端

    这两个验证都是必须的,因为客户端的验证安全性不是太高,但是可以防止80%以上的用户的误操作,可以减轻服务器端的压力,而且速度非常快,用户体验高。不要以为有了客户端的验证就不需要了服务器端的了,客户端的验证是很容易绕过去的,服务器端验证安全性比较高,所以一般验证两个验证都需要写。

    先看看下面这个注册界面,对用户的注册信息我们是有要求。不正确的信息是不会提交给后台服务器的。每一个控件我们都分别定义了对应的验证方法。

    <form action="doregisert.jsp" id="formsub" >

        <table>

        <tr>

            <td>用户名:</td>

            <td><input type="text" name="username" id="username"

            οnblur="checkusername()" /></td>

            <td><span id="usernameerror"></span></td>

        </tr>

        <tr>

            <td>密码:</td>

            <td><input type="password" name="pass" id="pass"

            οnblur="checkpass()" /></td>

            <td><span id="passerror"></span></td>

        </tr>

        <tr>

            <td>确认密码:</td>

            <td><input type="password" name="pass2" id="pass2"

            οnblur="checkpass2()" /></td>

            <td><span id="pass2error"></span></td>

        </tr>

        <tr>

            <td>邮箱:</td>

            <td><input type="text" name="useremail" id="useremail"

            οnblur="checkuseremail()" /></td>

            <td><span id="useremailerror"></span></td>

        </tr>

        <tr>

            <td>固定电话:</td>

            <td><input type="text" name="uerphone" id="uerphone" /></td>

            <td><span id="uerphoneerror"></span></td>

        </tr>

        <tr>

            <td ><input type="submit" value="注册"  /></td> 
            <td ><input type="reset" value="重置"  /></td>

        </tr>

        </table>

    </form>

    实现验证验证方法:

    <script type="text/javascript">

       function checkusername(){

            var username=document.getElementById("username");

            var usernameerror=document.getElementById("usernameerror");

            var unamevalue=username.value;

            if(unamevalue.length<6||unamevalue.length>20){

                usernameerror.innerHTML="<font color='red'>用户格式不对</font>";

                return false;

            }else{

               usernameerror.innerHTML="正确";

                return true;

            }  

       }

        function checkpass(){

            var pass=document.getElementById("pass");

            var passerror=document.getElementById("passerror");

            var passvalue=pass.value;

            if(passvalue.length<6||passvalue.length>20){

                passerror.innerHTML="<font color='red'>密码格式不对,必须介于6至20</font>";

                 return false;

            }else{

               passerror.innerHTML="正确";

                return true;

            }     

       }

        function checkpass2(){

            var pass=document.getElementById("pass");

            var pass2=document.getElementById("pass2");

            var pass2error=document.getElementById("pass2error");

            var passvalue=pass.value;

             var pass2value=pass2.value;

            if(passvalue!=pass2value){

                pass2error.innerHTML="<font color='red'>密码不一致</font>";

                 return false;

            }else{

               pass2error.innerHTML="正确";

                return true;

            }  

       }

       function checkuseremail(){

           var useremail=document.getElementById("useremail");

            var useremailerror=document.getElementById("useremailerror");

            var useremailvalue=useremail.value;

            //liubao@tom.com  

            //js  /正则表达式/

            var reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;

            if(!reg.test(useremailvalue)){

                useremailerror.innerHTML="<font color='red'>邮箱格式不对</font>";

                return false;

            }else{

               useremailerror.innerHTML="正确";

               return true;

            }

       }

    </script>

    现在只是验证提示,发现验证不过关还是网页还是会提交的,所以需要为这个form表单也绑定事件。

    <form action="doregisert.jsp" id="formsub" οnsubmit="return formsub()">

    注意这里需要在onsubmit前面加上return。对应的js函数的实现    

     

       function formsub(){

          if(checkusername()&checkpass()&checkpass2()&checkuseremail()){

               return true;

          }else{

              return  false;

          }

       }

    效果如下:

    展开全文
  • 'Choose the type of reCAPTCHA'中选择验证类型。第一个是网站。第二个只是后台验证。第三个是安卓。‘Domains’中填写要验证的域名。这个就和网站关联起来了。同意服务条款之后。点击‘register’3、集成文档。注册...

    1、去谷歌网站。(如果没有谷歌gmail,也许还要注册gmail并登陆)

    2、注册要验证的网站。

    f0fbb8a2704940754c3e5061a1b1bd8c.png

    8203ded15a051823846b491e7ef3057a.png

    Label中随意填写个标签。

    'Choose the type of reCAPTCHA'中选择验证类型。第一个是网站。第二个只是后台验证。第三个是安卓。

    ‘Domains’中填写要验证的域名。这个就和网站关联起来了。

    同意服务条款之后。点击‘register’

    3、集成文档。

    注册完成后会看到下面的内容。

    7612e618635ff80d7751e46f9a1a0710.png

    点击之后。会有集成方法。

    1e08189b9e64f75f6520acb80a7b0141.png

    ‘keys’里面有2个key:Site key是给前端放在HTML表单中的,Secret key是前端提交表单之后。后台去请求谷歌用的。

    4、前端集成要点:

    引入js

    把这个添加到表单中。

    用户提交表单之后。会有个名字是g-recaptcha-response的input框。提交到后台。

    5、后端验证:

    后端验证直接上代码:

    //组装请求

    let options = {

    method: 'POST',

    uri: 'https://www.google.com/recaptcha/api/siteverify',

    form: {

    secret: '上面的Secret key',

    response:fields['g-recaptcha-response'] 这里获取前端表单的g-recaptcha-response

    }

    };

    //请求谷歌验证

    let verifyBody = await requestPromise(options).catch(err =>{

    ctx.throw(err.message);

    });

    let verifyResult = JSON.parse(verifyBody);

    if (!verifyResult.success)

    ctx.throw("' I'm not a robot ' verification failed");

    展开全文
  • 输入框的表单验证表单验证中的最重要部分。文本框、密码框、文本域这些控件的验证方式完全一致,下面以一个文本框作为例子,演示输入框的验证方式。1. 基础版单击提交按钮时进行验证,是最简单最直接的验证方式。...
  • 跳过表单验证

    千次阅读 2019-07-06 11:20:52
    早上敲了个表单,结果直接跳过验证直接到了action的地方。 方法一: 在js代码中添加 if(input1.value.length >= 6){}//input1是不存在的就行。如果服务器没有做校验是可以直接跳过的前端的校验 方法二: ...
  • 使用 纯JQuery 进行 表单 验证

    万次阅读 2016-07-27 11:18:32
    对于JavaScript而言,进行表单数据的验证可谓是很有必要的,而且一般我们都会在网页上先进行一下表单验证,然后服务器端再次进行验证,来确保用户提交数据的准确性。下面就来分享一个JQuery实现的表单验证。制作表单...
  • 为element组件中的form表单添加验证规则的步骤: 为el-form通过属性rules绑定,指定一个校验对象 在script的data中定义rules校验对象,其中每一个属性都是一个验证规则 <script> export default { data...
  • from表单提交数据 验证后跳转页面

    千次阅读 2021-08-06 09:50:29
    from表单提交数据 验证后跳转页面 最近在弄这一块 验证使用alter老师弹出框后直接跳转到了下个页面 return false都不管用 所以记录一下 下次还能使用 <form action="跳转地址" method="post" enctype=...
  • 添加信息表单

    2013-10-22 15:04:03
    如同一般网页中的用户登入的表单验证,采用了extjs框架
  • 以下将实现一个表单提交验证 会生成如下代码 你应该注意到一些问题了,继承 HttpServlet 报红线。(应该是缺少某些包)解决如下: 鼠标右击项目->Build Path->点击comfigure Build Path进入->选择java Bulid ...
  • 重力形式验证器 用于增强 Gravity Forms 体验的 Javascript 验证。 这是一个非常简单的 ... 如果表单位于长网页上,则用户将在无效提交时滚动到顶部。 这个插件是基本的 在这个阶段处理文本输入。 必要时可以增强以
  • jquery validate实现表单验证 (正则表达式)

    万次阅读 多人点赞 2016-08-03 20:01:24
    jquery validate结合正则表达式实现表单验证
  • PHP+Ajax实现简单的表单验证

    千次阅读 2018-10-30 14:55:25
    先来一波概念!!! AJAX 是一种在无需重新加载整个网页的情况下...Ajax入门级别的表单验证:比如输入用户名,重复的话会自动弹出不可用的标识。 可以知道基本的步骤就是下图   1、创建一个对象XMLHttpReque...
  • 读者可以使用两种方法让Struts2进行表单验证。本篇教程会讲解更为基础的方法,即验证过程放在Struts2的动作类之中。添加验证方法为了让Struts2 的动作类能够验证用户在Struts2 表单中的输入,读者必须在自己的动作类...
  • 一个web注册功能往往需要开发表单验证,如下写一个简单的用户名及密码的验证提示及注意事项: &lt;script src="js/jquery.validate.min.js" type="text/javascript"&gt;&lt;/...
  • 用jQuery实现表单验证

    千次阅读 2019-02-02 16:18:43
    5.1.5 表单验证 表单(form)作为 HTML 最重要的一个组成部分,几乎在每个网页上都有体现,例如用户提交信息、用户反馈信息和用户查询信息等,因此它是网站管理者与浏览者之间沟通的桥梁。在表单中,表单验证的作用...
  • //一般用户在网站完成信息的添加修改……但是有意外,用户吧网页另存为到本地了,然后在这当中模拟了很多组数据,然后……不停地刷新想我的数据库中写入,还将隐藏表当中的id改了 //原先在处理过程中可以判
  • 表单自动填写,网页自动提交工具

    千次下载 热门讨论 2012-11-06 10:02:04
    模拟人工提交网页表单操作,同时监控提交结果变化并报警提示或自动处理报警动作。可广泛用于注册表单、登陆表单、信息添加修改表单提交。 1、支持多任务多操作连续提交,实现无人值守。 2、支持通过多代理服务器访问...
  • Django项目——使用表单添加数据

    千次阅读 2018-12-02 19:52:30
    --实参 action 告诉服务器将提交的表单数据发送到哪里,这里我们将它发回视图函数 new_topic() 。 实参 method 让浏览器以 POST 请求的方式提交数据。--> <!--来防止攻击者利用表单来获得对服务器未经授权的...
  • 表单提示信息

    千次阅读 2021-06-23 08:03:26
    平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。成功状态你输入的信息是正确的…运行效果如下或查看...
  • HTML网页设计基础笔记 • 【第3章 表单

    万次阅读 多人点赞 2020-03-21 10:03:12
    注册网站的用户时需要输入用户的信息,用户输入到网页中的信息均通过表单中的各表单元素来接收,然后传递服务器。 表单网页开发中很常见,典型的应用场景有以下几种: 网站的登录、注册。 填写订单信息。...
  • HTML5表单验证

    千次阅读 2015-03-09 15:54:54
    第一步:策划表单功能 首先,我们得为我们的表单策划一下该有什么功能,用什么形式表现。在这个示例中,我们就制作一个比较简单的留言表单。需要的功能如下: 名称 电子邮件 网站地址 提交按钮 ...
  • 【PHP学习】表单验证实现注册功能

    千次阅读 2019-05-13 19:58:43
    上次学了一下最基本的语法,这次笔记中记录的是用上次学到的语法以及第一次的前端页面做表单验证,实现注册功能。 网页界面博客链接:PHP 学习之路(1)—— Simple Message 系统 基础语法博客链接:PHP 学习之路...
  • .usernameParameter("username123") // .passwordParameter("password123") .loginPage("/myLoginController") // 一定要和 Controller 中 返回 myLogin页面 一致, .loginProcessingUrl("/login")// 必须和表单提交...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 52,397
精华内容 20,958
热门标签
关键字:

给网页添加表单验证