jquery自带表单验证form用法示例

首先下载一个已写好的验证jquery库：jquery验证库，解压后放在js文夹里面，在你的当前页面引用jquery验证表单库路径：

例如：

JavaScript代码
<script type="text/javascript" src="XXXXX/js/jquery.validate.js"></script>

下面是引用后验证具体用法：

JavaScript代码
<script type="text/javascript">
$(document).ready(function() {
$("#creator_2").validate({
rules:{
province:{
required: true
},
city:{
required: true
},
area:{
required: true
},
s_name:{
required: true,
minlength: 2,
maxlength: 10
},
s_email:{
required: true,
email:true,
maxlength:30
},
s_address:{
required: true,
minlength: 5,
maxlength: 100
},
s_tel:{
required: true,
minlength: 7,
maxlength: 15
}
},
messages:{
province:{
required: "请选择省份"
},
city:{
required: "请选择城市"
},
area:{
required: "请选择区域"
},
s_name:{
required: "请填写姓名",
minlength:"姓名最少为2个字符",
maxlength:"姓名最长为10个字符"
},
s_email:{
required: "请填写邮箱",
email:"请填写正确的格式",
maxlength:"邮箱最多30个字符"
},
s_address:{
required:"请填写收货地址",
minlength:"收货地址最少为5个字符",
maxlength:"收货地址最多为100个字符"
},
s_tel:{
required:"请填写电话号码",
minlength:"电话号码最少为5个字符",
maxlength:"电话号码最多为13个字符"
}
}
});
});
</script>

注：creator_2是form的ID号，province，s_email这些都是表单的元素的ID，最好给他们起名字和ID号是一样的，方便操作。格式如下：

XML/HTML代码
<input name="s_email" id="s_email" type="text" class="input required" />