建站
咨詢
售后
建站咨詢
新聞中心
2、javascript+CSS+Html實現(xiàn)用戶注冊及登錄的格式驗證。在用戶登錄功能中試加入圖片驗證碼功能
下面是關(guān)鍵代碼，如果剩下的你都搞不懂，我就無語了
創(chuàng)新互聯(lián)公司-成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、網(wǎng)站營銷推廣，申請域名，網(wǎng)頁空間，網(wǎng)站托管、服務(wù)器托管有關(guān)企業(yè)網(wǎng)站制作方案、改版、費用等問題，請聯(lián)系創(chuàng)新互聯(lián)公司。
JS
script type="text/javascript" language="javascript"
function reloadcodeOne(){//刷新驗證碼函數(shù)
var verify = document.getElementById('checkCodeImg');
verify.setAttribute('src', 'validateCode?dt=' + Math.random());
}
script type="text/javascript"
html
p
label驗證碼：/label
input class="code" value="請輸入驗證碼" title="請輸入驗證碼" name="rendCode" id="rendCode" onfocus="if (value =='請輸入驗證碼'){value =''}" onblur="if (value ==''){value='請輸入驗證碼'}" type="text" size="6" /
spanimg id="checkCodeImg" src="validateCodeServlet" onclick="javascript:reloadcodeOne();" alt="" width="75" height="24" //span
/p
java代碼
package com.zhihui.action.common;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import org.apache.struts2.ServletActionContext;
import com.zhihui.action.base.BaseAction;
/**
* p
* 校驗碼控制器
* /p
*
* @author liurong
* @version ValidateCodeServlet.java,v 0.1 2008-11-20 上午09:22:31 Administrator
* Exp
*/
public class ValidateCodeAction extends BaseAction {
private static final long serialVersionUID = 1L;
// 驗證碼圖片的寬度。
private int width = 10;
// 驗證碼圖片的高度。
private int height = 5;
// 驗證碼字符個數(shù)
private int codeCount = 5;
private int x = 0;
// 字體高度
private int fontHeight;
private int codeY;
/*char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J',
'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'U', 'V', 'W',
'X', 'Y', 'Z', '2', '3', '4', '5', '6', '7', '8', '9' };*/
char[] codeSequence = {'1', '2', '3', '4', '5', '6', '7', '8', '9', '0' };
HttpServletRequest req=ServletActionContext.getRequest();
HttpServletResponse resp=ServletActionContext.getResponse();
public String execute()
throws ServletException, java.io.IOException {
// 寬度
String strWidth = "70";
// 高度
String strHeight = "22";
// 字符個數(shù)
String strCodeCount = "5";
width = Integer.parseInt(strWidth);
height = Integer.parseInt(strHeight);
codeCount = Integer.parseInt(strCodeCount);
x = width / (codeCount);
fontHeight = height - 4;
codeY = height - 4;
// 定義圖像buffer
BufferedImage buffImg = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
Random random = new Random();
// 將圖像填充為白色
g.setColor(Color.WHITE);
g.fillRect(0, 0, width, height);
Font font = new Font("Fixedsys", Font.PLAIN, fontHeight);
g.setFont(font);
g.setColor(Color.BLACK);
g.drawRect(0, 0, width - 1, height - 1);
g.setColor(Color.BLACK);
for (int i = 0; i 15; i++) {
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(8);
int yl = random.nextInt(8);
g.drawLine(x, y, x + xl, y + yl);
}
// randomCode用于保存隨機(jī)產(chǎn)生的驗證碼，以便用戶登錄后進(jìn)行驗證。
StringBuffer randomCode = new StringBuffer();
int red = 0, green = 0, blue = 0;
for (int i = 0; i codeCount; i++) {
String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]);
red = 0;//random.nextInt(255);
green = 0;//random.nextInt(255);
blue = 0;//random.nextInt(255);
g.setColor(new Color(red, green, blue));
g.drawString(strRand, (i ) * x, codeY);
randomCode.append(strRand);
}
HttpSession session = req.getSession();
session.setAttribute("validateCode", randomCode.toString());
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Cache-Control", "no-cache");
resp.setDateHeader("Expires", 0);
resp.setContentType("image/jpeg");
ServletOutputStream sos = resp.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.close();
return null;
}
public int getWidth() {
return width;
}
public void setWidth(int width) {
this.width = width;
}
public int getHeight() {
return height;
}
public void setHeight(int height) {
this.height = height;
}
public int getCodeCount() {
return codeCount;
}
public void setCodeCount(int codeCount) {
this.codeCount = codeCount;
}
public int getX() {
return x;
}
public void setX(int x) {
this.x = x;
}
public int getFontHeight() {
return fontHeight;
}
public void setFontHeight(int fontHeight) {
this.fontHeight = fontHeight;
}
public int getCodeY() {
return codeY;
}
public void setCodeY(int codeY) {
this.codeY = codeY;
}
public char[] getCodeSequence() {
return codeSequence;
}
public void setCodeSequence(char[] codeSequence) {
this.codeSequence = codeSequence;
}
public HttpServletRequest getReq() {
return req;
}
public void setReq(HttpServletRequest req) {
this.req = req;
}
public HttpServletResponse getResp() {
return resp;
}
public void setResp(HttpServletResponse resp) {
this.resp = resp;
}
}
html5能做出類似驗證碼似的效果嗎
你好，可以使用canvas編寫出驗證碼效果，你可以參考
!DOCTYPE?HTML
html?lang="en"
meta?charset="utf-8"
script?type="text/javascript"?src="js/jquery-1.8.3.min.js"/script
style
@charset?"utf-8";
/*?CSS?Document?*/
body?{
background:?url(images/img10.jpg)?no-repeat?fixed;
}
body,form,ul,ol,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,table,fieldset,hr,div?{
margin:?0;
padding:?0;
}
body,input,select,textarea?{
color:?#000;
font:?12px/1.8?"微軟雅黑",?Arial,?Helvetica,?sans-serif;
}
img?{
border:?0;
vertical-align:?middle;
}
table?{
width:?100%;
border:?0;
border-collapse:?collapse;
border-spacing:?0;
}
ul,ol,li?{
list-style-type:?none;
}
a?{
color:?#000;
outline:?none;
text-decoration:?none;
}
a:hover?{
text-decoration:?underline;
}
.contain?{
width:?500px;
margin:?0?auto;
padding-top:?200px;
}
/style
body
div?class="contain"
canvas?id="myCanvas"?height="300px"?width="500px"your?browser?does?not?support?the?canvas?tag?/canvas
br?/?input?type="text"
button?onClick="pass()"提交/button
/div
/body
script?type="text/javascript"
var?canvas?=?$("#myCanvas").get(0);
var?_canvas?=?$("#myCanvas").get(0).getContext("2d");
var?return_str?=?"";
var?_ifstart?=?false;
var?_B_x?=?0;
var?_B_y?=?0;
function?can_click()?{
};
function?pass()?{
var?_val?=?$(":text:eq(0)").val();
if?(_val?==?return_str)?{
alert('您通過驗證了！');
}?else?{
alert('您輸入的驗證碼不正確！');
}
;
}
function?start()?{
try?{
function?drawscreen()?{
_canvas.fillStyle?=?"#ffffaa";
_canvas.fillRect(0,?0,?500,?300);
_canvas.strokeStyle?=?"#000";
_canvas.strokeRect(5,?5,?490,?290);
}
;
function?write_text(_str)?{
_canvas.fillStyle?=?"#000000";
_canvas.font?=?"20px?_sans";
_canvas.textBaseline?=?"top";
_canvas.fillText(_str,?195,?80);
}
;
function?getabc()?{
var?_str?=?"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,0,1,2,3,4,5,6,7,8,9";
var?_str_array?=?_str.split(",");
return_str?=?"";
for?(i?=?0;?i??4;?i++)?{
var?_rnd?=?Math.floor(Math.random()?*?_str_array.length);
return_str?+=?_str_array[_rnd];
}
;
}
;
drawscreen();
getabc();
write_text(return_str);
}?catch?(e)?{
alert(e);
}
};
$(document).ready(function(e)?{
start();
});
/script
/html
希望可以幫助到你
Html5與PHP制作驗證碼有什么不同
驗證碼必須由后端來做 前端只是顯示了一張圖片而已并不知道圖片上驗證碼的內(nèi)容 就php來說 原理是利用php的隨機(jī)函數(shù)申城一串驗證碼存儲到session 然后利用gd2吧驗證碼做成一張圖片顯示在前端 用戶在輸入驗證碼的時候是吧涌入輸入的值與session的值作對比來確定用戶是否輸入正確
thinkPHP3.2.3利用Ajax前臺實現(xiàn)驗證碼驗證，但通過form表單的按鈕提交后，驗證碼一直錯誤！如何解決?
驗證碼一直錯誤那就是：后臺生成的和前臺顯示的不是同一個驗證碼，你可以把后臺生成的打印出來測試一下。
1：驗證碼生成代碼：
//輸入驗證碼
function verifyimg(){
//驗證碼做配置
$config = array(
'seKey' = 'ThinkPHP.CN', // 驗證碼加密密鑰
'codeSet' = '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY', // 驗證碼字符集合
'expire' = 1800, // 驗證碼過期時間（s）
'useZh' = false,
'useImgBg' = false, // 使用背景圖片
'fontSize' = 14, // 驗證碼字體大小(px)
'useCurve' = true, // 是否畫混淆曲線
'useNoise' = true, // 是否添加雜點
'imageH' = 45, // 驗證碼圖片高度
'imageW' = 100, // 驗證碼圖片寬度
'length' = 4, // 驗證碼位數(shù)
'fontttf' = '4.ttf', // 驗證碼字體，不設(shè)置隨機(jī)獲取
'bg' = array(243, 251, 254), // 背景顏色
'reset' = true, // 驗證成功后是否重置
);
$verify=new Verify($config); //實例化Verify類。 空間類元素引入。使用次數(shù)多的情況下。
//verify= new \Think\Verify 完全限定名稱方式。 使用次數(shù)少的情況下。
$verify-entry(); //數(shù)據(jù)驗證碼。
}
2.下面的是一段驗證碼顯示代碼：
ul
li class="user_main_text"驗證碼： /li
li class="user_main_input"
input class="TxtValidateCodeCssClass" id="captcha" name="captcha" type="text"
驗證碼輸出
img src="{$smarty.const.__CONTROLLER__}/verifyimg" onclick="this.src='{$smarty.const.__CONTROLLER__}/verifyimg/'+Math.random()" alt="" /
/li
/ul
希望對你有幫助。
如何在html中的文本框中加入驗證碼
在html中的文本框中加入驗證碼，可以通過以下代碼實現(xiàn)：
驗證碼通過GD生成PNG圖片，并把$randval隨機(jī)數(shù)字賦給
$_SESSION['login_check_num']，在通過用戶輸入的$_POST進(jìn)行比較，來判斷是否正確。達(dá)到需要實現(xiàn)的功能，需要修改php.ini文件，使php支持GD庫。
?php
//調(diào)用此頁面，如果下面的式子成立，則生成驗證碼圖片
if($_GET["action"]=="verifycode")
{
rand_create();
}
//驗證碼圖片生成
function rand_create()
{
//通知瀏覽器將要輸出PNG圖片
Header("Content-type: image/PNG");
//準(zhǔn)備好隨機(jī)數(shù)發(fā)生器種子
srand((double)microtime()*1000000);
//準(zhǔn)備圖片的相關(guān)參數(shù)
$im = imagecreate(62,20);
$black = ImageColorAllocate($im, 0,0,0); //RGB黑色標(biāo)識符 $white =
ImageColorAllocate($im, 255,255,255); //RGB白色標(biāo)識符 $gray = ImageColorAllocate($im,
200,200,200); //RGB灰色標(biāo)識符 //開始作圖
imagefill($im,0,0,$gray);
while(($randval=rand()%100000)10000);{
$_SESSION["login_check_num"] = $randval;
//將四位整數(shù)驗證碼繪入圖片
imagestring($im, 5, 10, 3, $randval, $black);
}
//加入干擾象素
for($i=0;$i200;$i++){
$randcolor =
ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
imagesetpixel($im, rand()%70 , rand()%30 , $randcolor); }
//輸出驗證圖片
ImagePNG($im);
如何在HTML5設(shè)計中，增加登陸界面，采用手機(jī)注冊，驗證碼，信息注冊框等
要用手機(jī)驗證碼功能，你需要向通訊服務(wù)商（移動、聯(lián)通、電信）申請一個號碼，用于給客戶發(fā)送驗證短信
新聞名稱：html5驗證碼,html5驗證碼要用那種type屬性
網(wǎng)頁鏈接：http://www.dlmjj.cn/article/hodigd.html
