在页面导入相应的jquery和Validation的插件并导入并使用Validation框架
常用的限制使用如下：
相应的HTML中form中信息如下：
<form id="myform">
<label for="field">Required, only .xls and .csv files allowed</label>
FIle:<input id="file" name="file" type="file" />
PWD:<input id="pwd" name="pwd" type="text" />
PWD_AGAIN:<input id="pwd_again" name ="pwd_again" type="text" />
Birth:<input name="mydate" id="mydate" type="text" />
Age:<input name="age" id="age" type="text" />
Email:<input name ="myemail" id="myemail" type="text" />
URL :<input name="myurl" id="myurl" type="text" />
<input type="submit" value="Validate!" />
</form>
在js中绑定的代码如下：
<script type="text/javascript">
jQuery(function($) {
$("#myform").validate(rules:{
file:{
required:true, //表示必填的项
accept:"xls|csv" //可以使用
},
pwd:{
required:true,
creditcard:true, //表示必须为密码格式
rangeLength:[6,10] //表示密码的长度限制
},
pwd_again:{ //两次输入的密码的信息一致
required:true,
equalTo:"#pwd" //表示匹配的的字段
}
mydate:{
required:true,
date:true //输入的必须为时间类型
},
age:{
required:true,
digits:true, //表示输入的必须为数字
maxLength:2, //表示输入的必须为2个字符的长度
rangeValue:[1,100] //表示输入的数据的value的范围
},
myemail:{
require:true,
email:true //表示必须电子邮件的格式
},
myurl:{
required:true,
url:true //表示输入的必须为url的限制
}
});
});
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>jQuery PlugIn - 表单验证插件实例 Validate </title>
<!--black-tie,blitzer,blitzer,dot-luv,excite-bike,hot-sneaks,humanity,mint-choc,redmond,smoothness,south-street,start,swanky-purse,trontastic,ui-darkness,ui-lightness,vader-->
<link rel="stylesheet" type="text/css" href="/JsLib/jquery/themes/redmond/style.css"%>" />
<script type="text/javascript" src="JsLib/jquery/jquery-min-lastest.js"></script>
<script type="text/javascript" src="JsLib/jquery/ui/jquery-ui-all-min-lastest.js"></script>
<script type="text/javascript" src="JsLib/jquery/plugin/jquery.validate/jquery.validate.min.js"></script>
<script type="text/javascript"src="/JsLib/jquery/plugin/jquery.validate/localization/messages_cn.js"></script>
<% if (false)
{%><script src="js/jquery-vsdoc-lastest.js" type="text/javascript"></script>
<% }%>
<script type="text/javascript">
/*========== 必须放在头部加载的语句块. 尽量避免使用 ==========*/
</script>
<style type="text/css">
body
{
font-size:12px;
}
/* form中显示文字的label */
.slabel
{
width:100px;
display: -moz-inline-box;
line-height: 1.8;
display: inline-block;
text-align:right;
}
/* 出错样式 */
input.error, textarea.error
{
border: solid 1px #CD0A0A;
}
label.error
{
color:#CD0A0A;
margin-left:5px;
}
/* 深红色文字 */
.textred
{
color:#CD0A0A;
}
</style>
</head>
<body>
<form id="commentForm" method="get" action="">
<fieldset style="width:500px;"><legend>表单验证</legend>
<p><label for="cname" class="slabel"><em class="textred">*</em> 姓名:</label>
<input id="cname" name="name" size="25" class="required" minlength="2" />
</p>
<p><label for="cemail" class="slabel"><em class="textred">*</em> E-Mail:</label>
<input id="cemail" name="email" size="25"/>
</p>
<p><label for="curl" class="slabel">网址:</label>
<input id="curl" name="url" size="25" class="url" value="" />
</p>
<p><label for="ccomment" class="slabel"><em class="textred">*</em> 内容:</label>
<textarea rows="2" id="ccomment" name="comment" cols="20" class="required" style="height:80px;"></textarea>
</p>
<p style="text-align:center;">
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
<script type="text/javascript">
/*==========用户自定义方法==========*/
/*==========事件绑定==========*/
$(function()
{
});
/*==========加载时执行的语句==========*/
$(function()
{
$("#commentForm").validate(
{
errorClass: "error",
submitHandler: function(form)
{
//如果想提交表单, 需要使用form.submit()而不要使用$(form).submit()
alert("submitted!");
},
rules: {
//为name为email的控件添加两个验证方法:required()和email()
email: { required: true, email: true }
},
messages: {
//为name为email的控件的required()和email()验证方法设置验证失败的消息内容
email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"}
}
});
});
</script>
</body>
</html>
509
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
