jquery.validate 表达验证小demo
<head runat="server">
<title></title>
<script src="js/jquery-1.4.1.js" type="text/javascript"></script>//加载jquery库
<script src="js/jquery.validate.js" type="text/javascript"></script>//加载jquery验证插件
<script type="text/javascript">
$.validator.setDefaults({
submitHandler: function () {
alert("提交成功！");//验证通过后执行
}
});
$(document).ready(function () {
$("#form1").validate({
rules: {
txtName: {
required: true,
minlength: 2,
maxlength: 10
},
txtPwd: {
required: true,
minlength: 6,
maxlength: 6
},
txtPwd2: {
required: true,
minlength: 6,
maxlength: 6,
equalTo: "#txtPwd"
},
txtEmail: {
required: true,
minlength: 5,
email: true
},
txtUrl: {
required: true,
url: true
},
txtMobile: {
required: true,
minlength: 11
}
},
messages: {
txtName: {
required: "请填写您的用户名！",
minlength: "用户名不能小于两个字符！",
maxlength: "用户名不能大于十个字符！"
},
txtPwd: {
required: "请填写您的密码！",
minlength: "密码必须是六位字符！",
maxlength: "密码必须是六位字符！"
},
txtPwd2: {
required: "请填写确认密码！",
minlength: "确认密码必须是六位字符！",
maxlength: "确认密码必须是六位字符！",
equalTo: "两次密码不一致"
},
txtEmail: {
required: "请填写您的邮箱！",
minlength: "邮箱必须大于六位字符！",
email: "请填写正确的邮箱格式！"
},
txtUrl: {
required: "请填写您的网址!",
url: "请填写正确的网址！"
},
txtMobile: {
required: "请填写手机号码!",
minlength: "请填写正确的手机号码！"
}
},
/* 重写错误显示消息方法,以alert方式弹出错误消息 注释以下信息就以文字提示错误s*/
showErrors: function (errorMap, errorList) {
var msg = "";
$.each(errorList, function (i, v) {
msg += (v.message + "\r\n");
});
if (msg != "") alert(msg);
},
/* 失去焦点时不验证 */
onfocusout: false,
/*敲击键盘验证*/
onkeyup: false
});
});
</script>
<style type="text/css">
label{ color:Red; font-size:12px;}
</style>
</head>
<body>
<form id="form1" runat="server">
<table width="600px" border="0" cellpadding="0" cellspacing="1">
<tr>
<td style="width:100px;">
用户名：
</td>
<td>
<input id="txtName" name="txtName" type="text" />
</td>
</tr>
<tr>
<td style="width:100px;">
密码：
</td>
<td>
<input id="txtPwd" name="txtPwd" type="text" />
</td>
</tr>
<tr>
<td style="width:100px;">
确认密码：
</td>
<td>
<input id="txtPwd2" name="txtPwd2" type="text" />
</td>
</tr>
<tr>
<td style="width:100px;">
邮箱：
</td>
<td>
<input id="txtEmail" name="txtEmail" type="text" />
</td>
</tr>
<tr>
<td style="width:100px;">
网址：
</td>
<td>
<input id="txtUrl" name="txtUrl" type="text" />
</td>
</tr>
<tr>
<td style="width:100px;">
手机：
</td>
<td>
<input id="txtMobile" name="txtMobile" type="text" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input id="Button1" type="submit" value="submit" />//submit提交方式
<input id="Submit1" type="button" onclick="$('#form1').submit();" value="button" />//button提交方式
</td>
</tr>
</table>
</form>
</body>
