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

特别说明：

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