简单表单提交之前的校验和图片验证码_提交时出验证码还是提交前一步_扑愣蛾子的博客-程序员宅基地

技术标签： javascript

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html>
<%
   String contextPath = request.getContextPath();
%>
<script src="<%=contextPath %>/js/validateRequired.js" language="JavaScript"></script>
<script src="<%=contextPath %>/js/validateMaxLength.js" language="JavaScript"></script>
<script src="<%=contextPath %>/js/validator.js" language="JavaScript"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试</title>
</head>
<body >
   <div>
   <form name="feedbackForm" method="post" action="test.jsp">
       <tr>
           <th>姓名</th>
           <td>
           <input type="text" name="fb_name" size/>
           </td>
       </tr>
       <tr>
           <th>问题</th>
           <td>
           <textarea id="content" name="fb_content"></textarea>(限50字)
           </td>
       </tr>
       <tr>
           <th>图形验证码</th>
           <td>
           <a><img id="codeimgId" border=0 src="jsp/image.jsp" οnclick="vimag()"/></a>
           </td>
       </tr>
       <tr>
           <td>
               <input type="button" value="提交" οnclick="javascript:feedbackSubmit();"/>
           </td>

       </tr>
   </form>
   </div>
</body>
<script type="text/javascript">
   //提交
   function feedbackSubmit(){
       /* var fuc = new Function("a","b","alert(a+b)");
       var i = fuc(1,2);
       alert(i);
       var str = "ss";
       var reg = Validator.Chinese;
       alert(reg);
       if(reg.test(str)){
           alert("true");
       }else{
           alert("false");
       } */
       if(validate(document.feedbackForm)){
           alert("111");
           document.feedbackForm.submit();
       }
   }
   //校验函数
   function validate(form){
       var formValidationResult;
       formValidationResult = validateRequired(form)&&validateMaxLength(form);
       return (formValidationResult == 1);
   }

   function feedbackForm_required(){
       this.a0 = new Array("fb_name","姓名是必填项",new Function("varName","this.maxlength='30';return this[varName];"));
       this.a1 = new Array("fb_content","问题是必填项",new Function("varName","this.maxlength='30';return this[varName];"));
   }

   function feedbackForm_maxlength(){
       this.a0 = new Array("fb_name","姓名长度不能超过十个字符",new Function("varName","this.maxlength='10';return this[varName];"));
       this.a1 = new Array("fb_content","问题长度不能超过十个字符",new Function("varName","this.maxlength='10';return this[varName];"));
   }

   function vimag(){
       var img = document.feedbackForm.codeimgId;
       img.setAttribute("src","jsp/image.jsp?random="+Math.random());
   }
</script>

</html>

<%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" %>

<%!
   Color getRandColor(int fc,int bc){//给定范围获取随机颜色

       Random random = new Random();

       if(fc>255) fc = 255;

       if(bc>255) bc = 255;

       int r = fc+random.nextInt(bc-fc);

       int g = fc+random.nextInt(bc-fc);

       int b = fc+random.nextInt(bc-fc);

       return new Color(r,g,b);

}
%>
<%
   //设置页面不缓存
   response.setHeader("Pragma","No-cache");

   response.setHeader("Cache-Control","no-cache");

   response.setDateHeader("Expires",0);

   //在内存中创建图像
   int width =60,height=20;

   BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_BGR);

   //获取图形上下文
   Graphics g = image.getGraphics();

   //生成随机类
   Random random = new Random();

   //设定背景色

   g.setColor(getRandColor(200,250));
   g.fillRect(0, 0, width, height);

   //设定字体
   g.setFont(new Font("Times New Roman",Font.PLAIN,18));

   //画边框
   //g.setColor(new Color());
   //g.drawRct(0,0,width-1,height-1);

   //随机残成155条干扰线，使图像中的认证码不易被其它程序探测到
   g.setColor(getRandColor(160,200));
   for(int i=0;i<155;i++){

       int x = random.nextInt(width);
       int y = random.nextInt(height);

       int x1 = random.nextInt(12);

       int y1 = random.nextInt(12);

       g.drawLine(x,y,x+x1,y+y1);

   }

   //取随机产生的认证码（4位数）
   String sRand = "";
   for(int i=0;i<4;i++){
       String rand = String.valueOf(random.nextInt(10));

       sRand+= rand;

       //将认证码显示到图像中

       g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)));

       g.drawString(rand,13*i+6,16);
   }


   //认证码存入session
   session.setAttribute("random",sRand);

   //图像生效

   g.dispose();

   //输出图像到页面

   ImageIO.write(image,"JPEG",response.getOutputStream());

%>

    /**
   *     Check to see if fields must contain a value
   *   Fields are not checked if they are disabled
   *   @param form The form validation is taking place on.
   */

   function validateRequired(form){
       var isValid = true;
       var focusField = null;
       var i = 0;
       var fields = new Array();
       var formName = form.getAttributeNode("name");

       oRequired = eval('new '+formName.value+'_required()');

       for(x in oRequired){
           var field = form[oRequired[x][0]];
           if((field.type == 'hidden' ||
               field.type == 'text' ||
               field.type == 'textarea' ||
               field.type == 'file' ||
               field.type == 'checkbox'||
               field.type == 'select-one'||
               field.type == 'password')&&
               field.disabled == false){

               var value = '';
               //get field's value
               if(field.type == "select-one"){
                   var si = field.selectedIndex;
                   if(si>0){
                       value = field.options[si].value;
                   }
               }else if(field.type == 'chekcbox'){
                   if(field.checked){
                       value = field.value;
                   }
               }else{
                   value = field.value;
               }

               if(trim(value).length == 0){
                   if(i == 0){
                       focusField = field;
                   }
                   fields[i++] = oRequired[x][1];
                   isValid = false;
               }
           }else if(field.type == 'select-multiple'){
               var numOptions = field.options.length;
               lastSelected = -1;
               for(loop=numOptions-1;loop>=0;loop--){
                   if(field.options[loop].selected){
                       lastSelected = loop;
                       value = field.options[loop].value;
                       break;
                   }
               }
               if(lastSelected <0 || trim(value).length == 0){
                   if(i==0){
                       focusField = field;
                   }
                   fields[i++] = oRequired[x][1];
                   isValid = false;
               }
           }else if((field.length >0)&&(field[0].type == 'radio' || field[0].type == 'checkbox')){
               isChecked = -1;
               for(loop=0;loop<field.length;loop++){
                   if(field[loop].checked){
                       isChecked = loop;
                       break;//only one needs to be checked
                   }
               }
               if(isChecked <0){
                   if(i==0){
                       focusField = field[0];
                   }
                   fields[i++] = oRequired[x][1];
                   isValid = false;
               }
           }
       }
       if(fields.length>0){
           focusField.focus();
           alert(fields.join('\n'));
       }
       return isValid;
   }
   //Trim whitespace from left and right sides of s
   function trim(s){
       return s.replace(/^\s*/,"").replace(/\s*$/,"");
   }

/**
* A field is considered valid if less than the specified maximum
* Fields are not checked if they are disabled
*/

   function validateMaxLength(form){
       var valid = true;
       var focusField = null;
       var i = 0;
       var fields = new Array();
       var formName = form.getAttributeNode("name");

       oMaxLength = eval('new ' + formName.value + '_maxlength()');
       for(tmp in oMaxLength){
           var field = form[oMaxLength[tmp][0]];

           if((field.type == 'hidden'||
               field.type == 'text'||
               field.type == 'password'||
               field.type == 'textarea')&&
               field.disabled == false){

               var iMax = parseInt(oMaxLength[tmp][2]("maxlength"));
               alert("iMax"+iMax);
               var text = field.value;
               if(field.type == 'textarea'&&field.disabled==false){
                   text == text.replace(/\r\n/gi,"");
               }

               var length = dataLength(text);
               alert(length);
               if(length > iMax){
                   if(i == 0){
                       focusField = field;
                   }
                   alert(tmp);
                   fields[i++] = oMaxLength[tmp][1];
                   isValid = false;
               }
           }
       }
       if(fields.length>0){
           focusField.focus();
           alert(fields.join('\n'));
       }
       return isValid;
   }

   function dataLength(fData){
       var intLength = 0;
       for(var i=0;i<fData.length;i++){
           if((fData.charCodeAt(i)<0)||(fData.charCodeAt(i)>255))
               intLength = intLength + 2;
           else
               intLength = intLength + 1;
       }
       return intLength;
   }

image.jsp在session存了验证码，提交之后可自行先验证

本文链接：https://blog.csdn.net/u013129606/article/details/54916873

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

angularjs 路由ui-router详解——子路由，动态路由（三）_angularjs判断是否是子路由-程序员宅基地

文章目录问题描述文章参考快速使用 ui-router路由嵌套应用场景如何定义嵌套路由动态路由(restful传递参数)应用场景如何使用动态路由生命周期函数ng-click 方法中的this指向的$scope问题描述由于 ionic 1.x 是使用的 ui-router，因此我这里也是重点学习了ui-router文章参考深究AngularJS——ui-router详解快速使用 ui-router引入angularjs 和 ui-router 库<script src="../pub_angularjs判断是否是子路由

android实现图片加水印-程序员宅基地

最近做了一个图片添加水印的功能：传入的参数为：原图的bitmap，水印的字符串，以及context。原图的bitmap可以先取得图片的文件输入流fis，之后通过 Bitmap bm = BitmapFactory.decodeStream(fis, null, opt); 方法来取得。添加水印的方法如下：public Bitmap addWaterMark(Bitmap src, St

layui 图片上传表单提交 Spring MVC_layuispringmvc怎么让图片上传完在提交表单-程序员宅基地

Layui 的上传是最常用的, 不可或缺, 记录一下代码, 以后复制都能用!! 1.前端HTML:

‘XXXX’ was compiled with optimization - stepping may behave oddly; variables may not be available-程序员宅基地

在xcode中出现：‘XXXX’ was compiled with optimization - stepping may behave oddly; variables may not be available然后用单步调式模式出，一些变量出现空值，并且，不按顺顺执行语句。方法，工程在编译之后被优化了，所以导致单步的时候程

C++中无参数函数模板使用_模板函数无参-程序员宅基地

头文件中定义：template<class ia_t>T_bool isIgmpV3MultSrcSupported();template <> T_bool isIgmpV3MultSrcSupported<ia4_t>();template <> T_bool isIgmpV3MultSrcSupported<ia6_t>(..._模板函数无参

Oracle 11g RAC OCR 与 db_unique_name 配置关系说明-程序员宅基地

一. 问题一在做RAC standby 的alert log里发现如下错误：SUCCESS: diskgroup DATA was mountedERROR: failed toestablish dependency between database dave_st and diskgroup resourceora.DATA.dgSUCCESS: diskgroup FRA ..._db_unique_name asm

随便推点

SpringBoot+Hibernate+Mysql的联表查询_hibernate的多表关联springboot-程序员宅基地

SpringBoot+Hibernate+Mysql的联表查询上一篇对SpringBoot+Hibernate+Mysql的基本部署和常用增删查改进行了说明，下面主要阐述下SpingBoot中关于hibernate的多表连接查询。1.首先建立数据库表及其字段时应考虑外健的关联性表一：student表二：classroomclassroom的实体类没有变化依旧如下：package com..._hibernate的多表关联springboot

C语言中，FILE、LINE、func用法-程序员宅基地

具体例子如下：1 // test.c2 #include <stdio.h>3 int main(int argc, char *argv[])4 {5 printf("this is source-file %s, func %s, lines %d\n",6 __FILE__, __func__, __LINE__);7 ...

我在人间凑数的日子：二_“可惜我相貌平平，一事无成，惊艳不了谁的岁月，温暖不了谁的人生”你想错过那便错过吧什么意思-程序员宅基地

年轻不懂爱情与友情，长大后才懂得爱情是那么不容易，友情是那么的脆弱。生活从来都是这样，不把我放在眼里。你羡慕的生活背后，都是你熬不起的苦。自己都满身灰暗，还总是想给别人一些光。不要假装努力，因为结果不会陪你演戏，行动在于自己，未来依旧可期。微笑并不代表快乐，那只是一种表情。你试图以离开引起别人的注意，却不知道你是真的离开了，并没有任何人记住你。小时..._“可惜我相貌平平，一事无成，惊艳不了谁的岁月，温暖不了谁的人生”你想错过那便错过吧什么意思

IDEA 2020 SpringMVC环境搭建及入门案例_springmvc样例-程序员宅基地

Spring MVC入门Spring MVC概述MVC简述什么是SpringMVCSpringMVC的优点环境搭建Spring MVC概述MVC简述MVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化..._springmvc样例

verilog入门经验（一） always块使用_always verilog使用方法-程序员宅基地

1. 信号的产生及always块使用注意事项 1.1 不要在不同的always块内为同一个变量赋值。即某个信号出现在所以注意，在产生一个信号时，所有产生该信号的条件都应放在一个always块内考虑。 1.2 不要在同一个always块内同时使用阻塞赋值（=）和非阻塞赋值（ 1.3 使用always块描述组合逻辑时使用阻塞赋值（=），在使用alw_always verilog使用方法

MyBatis查询报错：Expected one result (or null) to be returned by selectOne(), but found: 2-程序员宅基地

MyBatis在查询数据时，查询涉及到多张表，且查询的对象存在集合的属性时，如下查询会报错：Expected one result (or null) to be returned by selectOne(), but found: 2<resultMap id="classesMap" type="cn.jam.entity.Classes"> <id column="c.id" property="id"/> <result column="c.name_expected one result