jQuery是一个快速、简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互。使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮。
jquery.validate.js是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法
1.jquery包的引入:
引入jquery包:<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src="/common/js/jquery/jquery.js'"></script>
2.添加校验说明:
主要使用的是javascript编写的验证库——jQuery.Validate,这个验证库是属于jQuery的插件。
引入:
<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src="/common/js/jquery/jquery.validate.pack.js"></script>
jQuery.Validate是监控form的,在任何提交表单的操作前jQuery.Validate都会检测表单里的输入项是否满足规则,满足才允许提交。所以需要在jQuery(document).ready()时为form进行验证注册,格式: $(“#formid”).validate(jsonobj)。
其中formid是文件中form表单的id,jsonobj包含两个属性:rules和messages,rules用来指明每个字段上添加的校验规则,messages用来说明相应的校验出错时对应的提示语。
messages为非必须,如果自己不定义该属性,会采用默认的提示。
例如/test/validate/formvalidate.jsp:
<html xmlns=https://www.linuxidc.com/Linux/2011-10/"http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=https://www.linuxidc.com/Linux/2011-10/"Content-Type" content=https://www.linuxidc.com/Linux/2011-10/"text/html; charset=ISO-8859-1" />
<title>表单校验</title>
<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src=https://www.linuxidc.com/Linux/2011-10/"/common/jquery.js"></script>
<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src=https://www.linuxidc.com/Linux/2011-10/"/common/jquery.validate.pack.js"></script>
<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript" src=https://www.linuxidc.com/Linux/2011-10/"/common/jquery.form.js"></script>
</head>
<body>
<form id=https://www.linuxidc.com/Linux/2011-10/"test">
<input name=https://www.linuxidc.com/Linux/2011-10/"nameput" type=https://www.linuxidc.com/Linux/2011-10/"text" size=https://www.linuxidc.com/Linux/2011-10/"20"/>
<input name=https://www.linuxidc.com/Linux/2011-10/"submit" type=https://www.linuxidc.com/Linux/2011-10/"submit" value=https://www.linuxidc.com/Linux/2011-10/"提交"/>
</form>
<script type=https://www.linuxidc.com/Linux/2011-10/"text/javascript">
$("#test").validate({
rules:{
"nameput":{
required:true,
minlength:3,
maxlength:10
}
},
messages:{
"nameput":{
required:"不能为空",
minlength:jQuery.format("长度不小于{0}"),
maxlength:jQuery.format("长度不大于{0}")
}
}
})
</script>
</body>
</html>
注意:nameput是input标签的name。
Required、minlength、maxlength都是jQuery校验的内置验证方式。jQuery内置验证方式参考jQuery.validate.js的API。
3.自定义验证方式