用了很多次jquery validate去做数据验证。可是每次都是网络上找的一些列子，没有好好去研究下，对于我这个算不上新手也不算老手的人来说，没用一种方式就要去好好研究下，去学会用到的每一种技术。今天我就把jquery validate数据验证好好学习下，争取以后写的时候就不用那么纠结了。
jquery validate有好几种方式，下面我就一一介绍。
首先我都都必须导入jquery包（jquery.js）这个可以网上下载，然后导入验证包jquery.validate.js，如果要加上样式的话，可以加上这么一段
/** css validate **/
input.error { border: 1px solid red; }
label.error {
/* background:url("./demo/images/unchecked.gif") no-repeat 0px 0px; */
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: red;
}
label.checked {
/* background:url("./demo/images/checked.gif") no-repeat 0px 0px; */
}
第一种，直接提交表单：
<html>
<form id="myForm">
<input type="text" id="depositDate" name="depositDate"/>
<input type="text" id="interestRate" name="interestRate"/>
</form>
<input type="submit" />
</html>
直接在页面中使用$(function(){
$("#myForm").validate({
rules: {
depositDate: "required",
interestRate:{
required:true,
number:true
}
},
messages: {
depositDate: "存入日期必填",
interestRate: {
required: "利率必填",
number:"其输入正确的利率(数字格式)"
}
}
})
});
这中方式，在你提交表单myForm的时候就开始验证，不通过则无法提交
第二种和上面类似，可以吧validate方法单独写出来
function valids()
{
$("#myForm").validate({
rules: {
depositDate: "required",
interestRate:{
required:true,
number:true
}
},
messages: {
depositDate: "存入日期必填",
interestRate: {
required: "利率必填",
number:"其输入正确的利率(数字格式)"
}
}
});
}
然后需要用时可以直接调用
$(function()
{
valids();
$("#save").click(function() {
if (!$("#myForm").valid()) {
return;
}
});
}
);
还可以自定义验证格式的
<script type="text/javascript">
$(function() {
jQuery.validator.addMethod("cusdate", function(value, element) {
var tel = /\d{4}-\d{2}-\d{2}/;
return this.optional(element) || (tel.test(value));
}, "日期格式错误");
var err = "";
err = '${error}';
if (err != "" && err != null) {
showMsg(err, '错误提示', "error");
}
});
</script>
自定义方法后就可以直接使用了，使用方法和上面相同
比如验证日期可以使用cusdate:true;
831
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
