在web开发过程中,验证环节不可缺少。其中可以分为客户端和服务端两部分的验证:客户端,就是通过写js代码来实现对提交表单的验证;服务端,就是通过写逻辑编写java代码来实现表单的验证,在实际开发过程中他们都各自发挥不同的作用。下面就基于客户端表单验证来简单介绍jquery旗下的一个验证框架jquery.validate。
首先,通过这个框架我们可以迅速验证一些常见的输入,还可以自己扩充自己的验证方法,并且对国际化也有很好的支持。所以说jquery.validate对web开发来说非常实用的。
步骤:
1.导入的jQuery.js与jquery.validate.js等文件,注意顺序不要颠倒
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.metadata.js">
<script type="text/javascript" src="jquery.validate.js">
2.指定哪个(或哪些)表单要在提交前先进行验证
<script type="text/javascript">
$(function(){
$("#testForm").validate();
});
</script>
注意:上面函数中“#testForm”意思是寻找Id属性,很多情况直接写成“form”表示直接对整个表单进行验证。
<script type="text/javascript">
$(function(){
$("form").validate();
});
</script>
3.指定每个字段的验证规则
<input type="text" name="loginName" class="required">
效果图如下:
基础使用过程
把验证规则写到字段元素的class属性中
用户名:<input type="password" name="password" class="required">
电子邮件:<input type="text" name="email" class="required email">
密码:<input type="password" name="password" id="password1"
class="{required: true, minlength: 3}">
再次输入密码:<input type="password" name="password2"
class="{equalTo:'[#password1]'} required">
以上用了两种方式:
1,指定多个class名称(验证规则),多个class名称之间用空格隔开,如:class=”required email”。
2,使用JSON对象,指定多个属性,如:class=”{required: true, minlength: 3}”。可以为某验证规则指定所用的参数,如minlength规则需要指定最小长度,这里为3。
3,混合使用,如:class=”{equalTo:’[#password1]’} required”。
说明:
1,如果使用第2种方式(JSON对象),就必须引入:jquery.metadata.js,作用是解析JSON对象。
2,如果表单字段的name不能重复,则只有最前面的配置起作用。
内置验证规则:
插件掩码可以自己在网上下载。