OA项目之Jquery客户端验证

浏览数：23 / 时间：2015年06月09日

1.今天做下验证方面的笔记

2.首先做的是客户端这一方的验证，为什么需要客户端的验证，是为了减轻服务器端的压力，可以利用Jquery的 validate插件来做，前面有个treeview插件来做树状显示，道理相同，利用Jquery插件来做很方便，简洁。

3.先看下效果图，类似如此的提示效果

①Jquery.validate是jquery旗下的一个验证框架，借助jquery的优势，我们可以迅速验证一些常见的输入，还可以自己扩充自己的验证方法，并且对国际化也有很好的支持。

②如何使用Jquery插件步骤：

第一步：导入的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">

第二步：指定哪个（或哪些）表单要在提交前先进行验证

<script type="text/javascript">
   		$(function(){
        	$("#testForm").validate();
    	});
</script>

第三步：指定每个字段的验证规则

名称 *<input type="text" name="loginName" class="required">
其中class="required" 表示本字段必须要填写。

效果如下图：

③下面详细说明下验证规则的的方式

1.把验证规则写到字段元素的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不能重复，则只有最前面的配置起作用。

④可以使用哪些验证规则（内置的验证规则）

说明：

1.remote是远程验证。比如注册验证用户名是否已被注册，返回值只能是true（验证成功）或false（验证失败）。在访问指定的url时，会自动把当前字段的值做为参数传递过去（以字段的name值为key，value为参数值）。

2.例如使用remote验证用户名是否存在，当添加一个用户后，在当前窗口中（同一个窗口），再次添加一个同名的用户，validate不能提示该用户已存在，这是因为缓存的原因，jquery仍认为该用户名可用。解决方法是在页面中添加如下代码：
    $().ready(function(){
        $.ajaxSetup ({
                cache: false //关闭ajax相应的缓存
         });
     });

3.某些属性值中的引号不能省略，否则出错。如accept、equalTo等，因为这时他需要的是一个字符串。