读书人

jquery validate (jquery 证验的三

发布时间: 2013-02-19 11:11:40 作者: rapoo

jquery validate (jquery 验证的三种方式)

jquery 验证非常简单,下面总结常用的三种方式:

第一种方式:也是比较标准的方式:

首先引入jquery 插件和 jquery 验证插件:

第一步:引入插件

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.metadata.js"></script>
<script type="text/javascript" src="js/messages_zh.js"></script>

第二步: 定义表单的错误输出:

<style type="text/css">
#frm label.error {
color: Red;
}
</style>

第三步:添加错误处理方法;

jquery验证,需要有 1:定义验证方法, 2:添加验证规则

下面贴出常用的验证小例子,一看就明白了。

先看效果图:

jquery validate     (jquery 证验的三种方式)

var $params = {debug:false, rules:{}, messages:{}};

$("#frm").validate($params);

rules{}中定义验证规则的方法。 messages{}定义错误输出。

以上为第一种方式:

第二种方式:和第一种基本差不多:

                $('#username').rules('add', { required: true,  byteMaxLength:20,valiEnglish:true});                $('#postcode').rules('add', { postcodeVal:true});                $('#number').rules('add', { byteMaxLength:5,numFormat:5});                $('#identifier').rules('add', { sfzhValidate:true});

为每一个单独的元素添加验证规则。其中调用了rules( "add", rules )方法:

增加验证规则为匹配的元素。

注意:$("form").validate()方法必须首先被调用。

这个规则也能包含一个messages-object,定义常用的messages。




读书人网 >Web前端

热点推荐