一直都知道Jquery验证，就是懒得去看了，今天实在是无聊之极，自己做了一个小例子，给大家分享一下，基本上可以满足验证功能，使用方法很简单，把一下代码复制到您的页面中，正确添加Jquery的一些引用就能够顺利运行了，有问题，我们再继续讨论，
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script src="Scripts/jquery.validateKit.js" type="text/javascript"></script>
<style type="text/css">.validate-error{ color:Red;}</style>
<script type="text/javascript">
//验证时候注意上下两种方法的区别，上面的方法无法使用占位符
function lang(key) {
mylang = {
'ls_cknull': '输入信息不能为空！',
'ls_ckemail': '邮箱格式不正确！',
'ls_ckranger': '输入长度为{0}-{1}位之间！',
'ls_cknumber': '输入信息必须为数值类型！',
'Is_ckminlength': '密码至少输入 {0} 字符!', //jQuery.format("密码至少输入 {0} 字符!"),
'': ''
};
return mylang[key];
}
</script>
<script type="text/javascript">
$(function () {
//addMethod的第一个参数,就是添加的验证方法的名子,这时是af
//addMethod的第三个参数,就是自定义的错误提示,这里的提示为:"必须是一个字母,且a-f"
//addMethod的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法
//如果只有一个参数,直接写,如果af:"a",那么a就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开
$.validator.addMethod("af", function (value, element, params) {
if (value.length > 1) {
return false;
}
if (value >= params[0] && value <= params[1]) {
return true;
} else {
return false;
}
}, "必须是一个字母,且a-f");
$("form").validate({
rules: {
"Type": { required: true, isNumber: true, byteRangeLength: [1, 5] },
"TypeName": { required: true, byteRangeLength: [4, 50] },
"txtcheckNameTest": { isNumber: true }, //可以为空，但只能输入数值类型
"txtcheckNamea": { minlength: 5 }, // 验证条件：最小长度为5
"txtcheckNameb": { af: ["a", "f"]} //自定义验证方法
},
messages: {
"Type": { required: lang("ls_cknull"), isNumber: $.format(lang("ls_cknumber")), byteRangeLength: lang("ls_ckranger") },
"TypeName": { required: "请输入类别名称.", byteRangeLength: $.format("请确保输入的值在{0}-{1}个字节之间") },
"txtcheckNameTest": { isNumber: lang("Is_cknumber") },
"txtcheckName": { minlength: lang("Is_ckminlength") },
"txtcheckNamea": { minlength: $.format(lang("Is_ckminlength")) },
"txtcheckNameb": { af: "必须是一个字母,且a-f" }
},
errorClass: "validate-error", // 错误提示的css类名"error"
errorPlacement: function (error, element) {
//error.css('font-family', '华文隶书'); //设置字体的样式
element.after(error);
},
success: function () { //每个元素验证通过的参数
//alert("yanghznegtong");
}
});
});
//表单提交出发函数：
function cksub() {
if ($("form").valid()) {
alert("验证通过");
}
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server" action="FromManager.aspx" method="post" οnsubmit="cksub()" >
<table class="tableinfo" cellpadding="0" cellspacing="0">
<tr>
<th>验证一：</th>
<td><input type="text" value="" name="Type" /></td>
</tr>
<tr>
<th>验证二：</th>
<td><input type="text" value="" name="TypeName" /></td>
</tr>
<tr>
<th>验证三：</th>
<td><input type="text" value="" name="txtcheckNameTest" /></td>
</tr>
<tr>
<th>验证A：</th>
<td><input type="text" value="" name="txtcheckNamea" /></td>
</tr>
<tr>
<th>自定义验证：</th>
<td><input type="text" value="" name="txtcheckNameb" /></td>
</tr>
<tr>
<td colspan="2">
<div class="operate">
<div class="but_ok"><span><input class="button" type="submit" value="提交" /></span></div>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
