jquery validate.js表单验证（带验证码）

最新推荐文章于 2022-12-07 08:30:00 发布

苏葛

最新推荐文章于 2022-12-07 08:30:00 发布

阅读量2.4k

点赞数 1

分类专栏： js插件

本文链接：https://blog.csdn.net/qq_15058425/article/details/51729245

版权

js插件专栏收录该内容

6 篇文章 0 订阅

订阅专栏

运用jquery和validate.js插件做的一个简单的表单验证，同时还有带验证码

首先需要引入jquer js和validate.js

然后是如下Jsp,如下代码赋值即可运行：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'Form03.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="Jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="Jquery/jquery.validate.min.js"></script>
<script type="text/javascript" src="Jquery/jquery.validate.messages_cn.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }

#code
{
font-family:Arial;
font-style:italic;
font-weight:bold;
border:0;
letter-spacing:2px;
color:blue;
}

</style>
<script type="text/javascript">
$(function(){
createCode();//生成验证码
$("#commentForm").validate({
rules:{
username:{
required:true,
minlength:2
},
email:{
required:true,
email:true
},
comment:{
required:true

},
url:{
url:true
},
code:{
required:true,
}
}

});

$("#code").click(function(){
createCode();
});

$("#input").blur(function(){
validate();

});

//生成验证码
function createCode(){
code = "";
var codeLength = 4;//验证码的长度
var random = 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');//随机数
for(var i = 0; i < codeLength; i++) {//循环操作
var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）
code += random[index];//根据索引取得随机数加到code上
}
$("#code").val(code);
}
//验证码验证
function validate(){
var inputCode = $("#input").val().toUpperCase(); //取得输入的验证码并转化为大写
if(inputCode!=""&&inputCode != code ) { //若输入的验证码与产生的验证码不一致时
$("#tishi").text("验证码输入错误");
$("#input").val("");//清空文本框
}
else { //输入正确时
$("#tishi").text("");
}

}

});

</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="#">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
</p>
<p>
<label for="code">验证码</label>
<em>*</em><input type ="text" id = "input" name="code"/><strong id="tishi"></strong><input type = "button" id="code"/>
</p>
<p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>

苏葛

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery validate.js表单验证（带验证码）

运用jquery和validate.js插件做的一个简单的表单验证，同时还有带验证码首先需要引入jquer js和validate.js 然后是如下Jsp,如下代码赋值即可运行：String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.
复制链接

扫一扫