jquery表单验证和JavaScript生成验证码

1、引入jquery.js和jquery.validate.js文件。

<script src="script/jquery.js" type="text/javascript"></script>
<script src="script/jquery.validate.js" type="text/javascript" charset="gbk"></script>

2、编写jquery代码

<script type="text/javascript">
$(document).ready(function(){
createCode();
$("#form1").validate({
rules : {
content : {
required : true,
minlength : 5,
maxlength : 500
},

province : {
required : true

},
name:{
required: true
},


company:{
required:true
},
position:{
required:true
},
email:{
required:true,
email:true
},
input1:{
required:true,
equalTo:"#checkCode"
}



},
messages : {
content : {
required : "*请输入留言内容",
minlength : "*留言内容不能少于5个字符",
maxlength : "*留言内容不能超过500个字符"
},

province : {
required : "*请输入国家"

},
name:{
required: "*请输入电子邮件"

},

company:{
required:"*请输入公司名称"
},
position:{
required:"*请输入您的职位",
},
email:{
required: "*请输入电子邮件",
email:"*邮件格式不合法"
},
input1:{
required:"请输入验证码",
equalTo:"验证码错误"
}



}


});

var code ; //在全局 定义验证码
function createCode()
{
code = "";
var codeLength = 4;//验证码的长度
var checkCode = document.getElementById("checkCode");

var selectChar = 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');//所有候选组成验证码的字符，当然也可以用中文的


while(code.length<4)
{
var charIndex = Math.floor(Math.random()*36);
if((selectChar[charIndex]!='O')&&(selectChar[charIndex]!='0'))
{
code+=selectChar[charIndex];
}

}

if(checkCode)
{

checkCode.className="code";
checkCode.value = code;
}

};



});

</script>

注意编写jquery代码的时候必须放在同一个页面中</script>页面中，因为它执行它执行的时候是从$(document).ready()方法来家在jquery的。
在表单验证的时候就有的在最后结尾的时候就不能有逗号。否则就会出错。
1、中情况：
2、rules:{
content : {
required : true,
minlength : 5,
maxlength : 500-------------------最后结尾的时候就不能有逗号。

} ----------------------------最后结尾的时候就不能有逗号。

},
message:{
content : {
required : "*请输入留言内容",
minlength : "*留言内容不能少于5个字符",
maxlength : "*留言内容不能超过500个字符"------最后结尾的时候就不能有逗号。
},

}----------------------------最后结尾的时候就不能有逗号。


表单页面：
<FORM id="form1" method="post" name="form1" action="newscenter/message/message.action">
<DIV> </DIV>
<DIV id=pagebox>
<LINK rel=stylesheet type=text/css href="css/newscenter_css/global.css">
<LINK title=style2 rel=stylesheet type=text/css href="css/newscenter_css/global_orange.css">
<LINK title=style3 rel=stylesheet type=text/css href="css/newscenter_css/global_green.css">
<SCRIPT type=text/javascript src="script/newscenter_script/replaceStyle.js"></SCRIPT>


<DIV>
<DIV id=galleryleft>
<DIV><IMG src="images/newscenter_images/message/ifairbanner1.jpg"><IMG
src="images/newscenter_images/message/ifairbanner2.jpg"><IMG
src="images/newscenter_images/message/ifairbanner3.jpg"><IMG
src="images/newscenter_images/message/ifairbanner4.jpg"></DIV>
<DIV id=navigate><A href="http://www.cantonfair.org.cn/cn/index.asp">首页</A>
>> <A href="http://www.cantonfair.org.cn/cn/info/default.aspx">多媒体新闻中心</A>
>> <A
href="http://www.cantonfair.org.cn/cn/info/MyCantonfair.aspx">我的广交会</A></DIV>
<DIV id=myvoice class=galleryleft>
<DIV id=myvoice_tit class=ifair_tit>
<DIV class=left><IMG id=img_title
src="images/newscenter_images/message/wyvoice_tit.gif"></DIV>
<DIV class=right><A
href="http://www.cantonfair.org.cn/cn/info/voicing.shtml"></A></DIV>
<DIV class=clear></DIV></DIV>
<DIV id=voices>
<DIV id=upload_form>
<DIV
style="BORDER-BOTTOM: #ddd 1px solid; PADDING-BOTTOM: 10px; MARGIN-BOTTOM: 10px"
class=red14>
<P>上传您在现场拍摄的照片，宏伟的广交会展馆、与采购商洽谈、特装风采、为展客商服务…… 在广交会官方网站留下您的身影，或分享您镜头中的广交会。</P>
<P></P></DIV>
<DIV class=name>我的留言</DIV>
<DIV class=select><TEXTAREA style="WIDTH: 340px; HEIGHT: 109px" id="content" rows=2 cols=20 name="content"></TEXTAREA></DIV>
<DIV class=name>我是</DIV>
<DIV class=select><SELECT style="WIDTH: 100px" id="type" name="type">
<OPTION selected value=参展商>参展商</OPTION> <OPTION value=采购商>采购商</OPTION> <OPTION
value=服务人员>服务人员</OPTION> <OPTION value=其他>其他</OPTION></SELECT> </DIV>
<DIV class=name>我来自(国家/地区)</DIV>
<DIV class=select><INPUT style="WIDTH: 340px" id="province" type="text"
name="province"> </DIV>
<DIV class=name>我的名字</DIV>
<DIV class=select><INPUT style="WIDTH: 340px" id="name" type="text"
name="name"></DIV>
<DIV class=name>我的公司</DIV>
<DIV class=select><INPUT style="WIDTH: 340px" id="company" type="text"
name="company"></DIV>
<DIV class=name>职位</DIV>
<DIV class=select><INPUT style="WIDTH: 340px" id="position" type="text"
name="position"></DIV>
<DIV class=name>电子邮件</DIV>
<DIV class=select><INPUT style="WIDTH: 340px" id="email" type="text"
name="email"></DIV>
<DIV class=name>验证码</DIV>
<DIV class=select><INPUT style="WIDTH: 63px" id="input1" class=colorblur
οnfοcus="this.className='colorfocus';" maxLength=5 type=text
name="input1">  <input type="text" name="checkCode" readOnly id="checkCode" class="unchanged" style="width: 50px; background-color:#CCCCCC" /><span style="color:red">大小写要一致</span></DIV>
<DIV class=name></DIV>
<DIV class=select><INPUT id="Button1" value=提交 type="submit" name="Button1"> </DIV>
<DIV class=clear></DIV></DIV></form>