JQuery的表单验证之JQuery.validate插件

来源：互联网发布：linux 激活网卡编辑：程序博客网时间：2024/06/06 00:39

特别说明：

JQuery.validate默认情况下

1.J dateISO支持‘yyyy-MM-dd’格式

2.对于远程验证，服务器相应格式需要为true或者false，这样的话不能带其他参数

3.对于远程验证，没有进度条提示，这样不够友好。

4.默认不支持手机号，电话等

5.优点对于数字类型、字符串长度、是否相等、url、邮箱比较好用

6.支持select，checkbox，radio

7.支持代码模式和html标记模式，很方便自定义错误内容。

结论：对于远程验证的需求，很多时候还是要自己手写。

Demo源代码地址：http://git.oschina.net/tiama3798/BootstrapBack_Demo/tree/JQuery.validate/

一、代码验证模式简单Demo

关键引用：

<script src="~/Scripts/validate/jquery.validate.min.js"></script><script src="~/Scripts/validate/localization/messages_zh.min.js"></script>

HTMl代码：

<h2>常用业务类型格式验证</h2><div class="panel panel-success">    <div class="panel-heading">        <div class="panel-title">            前台验证表单后提交        </div>    </div>    <div class="panel-body">        <form role="form" class="form-horizontal">            <div class="form-group">                <label class="col-sm-2 control-label">昵称：</label>                <div class="col-sm-10">                    <input class="form-control " name="nickname" placeholder="请输入昵称3-10字符" />                </div>            </div>            <div class="form-group">                <label class="control-label col-sm-2">博客地址：</label>                <div class="col-sm-10">                    <input class="form-control " name="blog" placeholder="个人博客地址" />                </div>            </div>            <div class="form-group">                <label class="control-label col-sm-2">邮箱：</label>                <div class="col-sm-10">                    <input class="form-control" name="email" placeholder="" />                </div>            </div>            <div class="form-group">                <label class="control-label col-sm-2">信用卡：</label>                <div class="col-sm-10">                    <input class="form-control " name="creditCard" />                </div>            </div>            <div class="form-group">                <label class="control-label col-sm-2">创建日期：</label>                <div class="col-sm-10">                    <input class="form-control " type="date"  name="createTime"/>                </div>            </div>            <div class="form-group">                <label class="control-label col-sm-2">创建日期2：</label>                <div class="col-sm-10">                    <input class="form-control" name="createTime2" />                </div>            </div>            <div>                <input type="submit" class="btn btn-success" value="提交" />            </div>        </form>    </div></div>

JS代码：

$('form').validate({    debug: true,    submitHandler: function (form) {        //此处form为表单dom对象        alert('提交表单');        //手动触发表单提交        //form.submit();    },    rules: {        nickname: {            required: true,            rangelength: [3, 10]        },        blog: {            required: true,            url: true  //指定url类型验证 (特别说明不支持localhost 本地连接)        },        email: {            required: true,            email: true  //指定email类型验证        },        creditCard: {            required: true,            creditcard: true //合法的信用卡号 (此处不支持)        },        createTime: {            required: true,            date: true  //时间类型验证 (此处最好不使用)        },        createTime2: {            required: true,            dateISO: true //时间类型验证 默认的类型为 yyyy-MM-dd        }    },    messages: {        nickname: {            required: '昵称不能为空',            rangelength: '昵称长度3-10'        }    }});

更多api可以参考：http://www.runoob.com/jquery/jquery-plugin-validate.html

0 0