<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script src="jquery-1[1].3.2.min.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function(form) { form.submit(); }
});
$().ready(function() {
// validate signup form on keyup and submit
$("#form1").validate({
event: "blur",
rules: {
name: "required",
url: "required",
email: "required",
name: {
required: true
},
url: {
required: true,
url:true
},
email: {
required: true,
email:true
},
tel:{
required: true,
digits:true
}
},
messages: {
name: {
required: "请输入名称！"
},
url: {
required: "请输入地址！",
url: "输入正确的网站地址！"
},
email: {
required: "请输入Email！",
email:"请输入正确的邮件地址"
},
tel:{
required:"请输入电话号码",
digits:"请输入正确的号码"
}
}
});
});
</script>
</head>
<body>
<div id="main">
<form class="cmxform" id="form1" runat="server" >
<fieldset>
<legend>密码修改</legend>
<p>
<label for="txtOldPassword">网站名称</label>
<asp:TextBox ID="name" runat="server" MaxLength="150" ></asp:TextBox>
</p>
<p>
<label for="txtNewPassword">网站链接地址</label>
<asp:TextBox ID="url" runat="server" MaxLength="150" ></asp:TextBox>
</p>
<p>
<label for="txtConfirmPassword">Email</label>
<asp:TextBox ID="email" runat="server" MaxLength="150" ></asp:TextBox>
</p>
<p>
<label for="txtConfirmPassword">电话号码</label>
<asp:TextBox ID="tel" runat="server" MaxLength="150" ></asp:TextBox>
</p>
<p>
<label for="txtConfirmPassword">联系人</label>
<asp:TextBox ID="linkman" runat="server" MaxLength="150" ></asp:TextBox>
</p>
<p>
<asp:Button ID="btnSubmit" class="btn3_mouseout" title="提交" runat="server"
Text="提交" />
<input type="hidden" name="btnSubmit" value=" 确定 " />
<input type="button" id="btnCancel" value="取消" />
</p>
</fieldset>
</form>
</div>
</body>
</html>
1.event是触发校验的方式，可选值有keyup(每次按键时)，blur(当控件失去焦点时)，不使用这个参数时就只在按提交按钮时触发
2.如果在提交前还需要进行一些自定义处理使用submitHandler参数，其它的都比较简单，自己看看API就成了.
3.debug，如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便.
4.rules，所有的检验规则都写在这个参数里面.
校验规则参数
格式为： name : {rule1,rule2,...} 经过测试，用input标签的id是没有效果的，必须使用input标签的name
(1) required: true 必输
(2) number: true 只能输入数字(包括小数)
(3) digits:true 只能输入整数
(4) minValue: 3 不能小于3
(5) maxValue: 100 最大不超过100
(6) rangeValue:[50,100] 值范围为50-100
(7) minLength: 5 最小长度(汉字算一个字符)
(8) maxLength: 10 最大长度(汉字算一个字符)
(9) rangeLength:[5,10] 长度范围为5至10位(汉字算一个字符)
(10) 上面的minLength, maxLength, rangeLength 这三项除了text input之外还可以用于checkbox,select这两种控件
(11) email:true 电子邮件
(12) equalTo: "#field" 与#field值相同
(13) dateISO:true 日期型，格式为1998/01/22 1999-12-12
required: true| false |（表达式）|（函数） 还可以是表达式和函数，函数返回true表示required有效，false表示required无效，返回【""】空对象表示true,返回【" "】和【"wangwang"】等非空的对象为false
5.messages，自定义错误信息，格式与rules类似，需要注意的是如果使用此项，那么所有的校验项都必需自定义出错信息，如果只想定义其中的某一些，那么就把其它的出错信息定义为空（即""），系统即会使用默认值。
messages {
password: {
required: "请输入您的密码."
minLength: "密码不能小于５位.",
maxLength: "密码不能长于32位."
},
如何自定义校验规则：
可以通过自定义检验函数的方式新增加校验规则，步骤如下：
1. 在定义校验规则之前定义一个新的方法
2. 在rules中指定这个某个域使用此校验规则
3. 在messages中指定这个域使用此校验规则没有通过的提示信息
//这里定义了一个名为equal的规则
//value是指当前校验域的值
//element是指当前检验的域
//param是指在rules中设定的参数
//这三个参数会在进行校验时由系统自动带入
$.validator.methods.equal = function(value, element, param){
//在这里使用上面的三个参数进行校验
if(value == param)
return true;//如果当前域的值等于指定的参数就通过校验
};
$('#form1').validate({
rules:{
field1:{equal:20}//在这里指定field1的检验规则是equal，并且参数是20
},
messages:{
field1:{equal:'您的计算有误！'}//在这里定义field1的equal规则校验出错后的提示信息
}
});
将校验规则写到控件中 有时候我们的控件是动态生成的，这个时候就不可能提前先写好校验规则，需要在生成控件的同时写校验规则.
这样写校验规则有两种写法，一是将规则写到class属性中，二是将规则写到单独的validate属性中，其中：
写到class属性的写法如下，例子中在规则前添加了名为some, other, styles 的三个class：
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<input id="cname" name="name" class="some other styles {required:true,minLength:2}" />
<textarea id="ccomment" name="comment" ></textarea>
262
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
