用了很多次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;