jQuery插件实现 validate

实现效果：

 

HTML代码（表单提交一定要放在form里面）：

<!-- Tab panes -->
            <div class="pl20 pr20">
                <div class="title mt20">基本信息</div>
                <form action = "" id="addFormTab" method="post" class="form-horizontal">
                    <message content="${message}"/>
                    <div class="tab-content pt15">
                        <table class="editTable">
                            <tr>
                                <td class="Hint " width="145">
                                    上级机构：
                                </td>
                                <td>
                                    <div class="input-group wt220">
                                        <input type="text" class="form-control wt160" readonly="readonly"
                                               id="parentName"
                                               value="">
                                        <input type="hidden" id="parentCode" value="">
                                        <input type="hidden" id="parentCodes" value="">
                                        <a href="javascript:void(0);" class="label-file wt40" onclick="addOrgUpOrg()">选择
                                        </a>
                                    </div>
                                </td>
                                <td class="Hint " width="145">
                                    <span class="col_red">*</span>
                                    机构名称
                                </td>
                                <td>
                                    <input type="text" id="orgNameCreat" class="validate[required] form-control wt220">
                                </td>
                            </tr>
                            <tr>
                                <td class="Hint" width="120px">
                                    <span class="col_red">*</span>
                                    机构全称：
                                </td>
                                <td>
                                    <input type="text" id="orgFullNameCreat" class="validate[required] form-control wt220">
                                </td>
                                <td class="Hint">
                                    <span class="col_red">*</span>
                                    机构类型：
                                </td>
                                <td name="coupon_use_type_limit_tr">
                                    <select class="form-control wt220" id="orgTypeCreat">
                                        <option value="1">省级公司</option>
                                        <option value="2">市级公司</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="Hint " width="145">
                                    <span class="col_red">*</span>
                                    机构代码：
                                </td>
                                <td>
                                    <input type="text" id="orgCodeCreat"
                                           class="validate[required ,custom[onlyLetterNumber]] form-control wt220">
                                </td>
                                <td class="Hint " width="145">
                                    <span class="col_red">*</span>
                                    排序号：
                                </td>
                                <td>
                                    <input type="text" id="treeSortCreat" class="validate[required ,custom[onlyNumberSp]] form-control wt220">
                                </td>
                            </tr>
                        </table>

                        <div class="title">详细信息</div>
                        <table class="editTable">
                            <tr>
                                <td class="Hint " width="145">
                                    负责人：
                                </td>
                                <td>
                                    <input type="text" id="leaderCreat" class="form-control wt220">
                                </td>
                                <td class="Hint " width="145">
                                    <span class="col_red">*</span>
                                    办公电话：
                                </td>
                                <td>
                                    <input type="text" id="phoneCreat" class="validate[required ,custom[phone]] form-control wt220">
                                </td>
                            </tr>
                            <tr>
                                <td class="Hint " width="145">
                                    联系地址：
                                </td>
                                <td>
                                    <input type="text" id="addressCreat" class="form-control wt220">
                                </td>
                                <td class="Hint " width="145">
                                    <span class="col_red">*</span>
                                    邮政编码：
                                </td>
                                <td>
                                    <input type="text" id="zipCodeCreat" class="validate[required ,custom[chinaZip]] form-control wt220">
                                </td>
                            </tr>
                            <tr>
                                <td class="Hint " width="145">
                                    电子邮箱：
                                </td>
                                <td>
                                    <input type="text" id="emailCreat" class="form-control wt220">
                                </td>
                                <td class="Hint " width="145">
                                </td>
                                <td>
                                </td>
                            </tr>
                        </table>

                        <!-- 按钮 -->
                        <div class="p20 text-center ">
                            <a href="javascript:void(0)" id="save_btn" class="btn-primary btn mr10"
                               onclick="saveOrganization()">保存</a>
                            <button type="button" class="btn-default btn mr10 plr40 h36 " data-dismiss="modal"
                                    aria-label="Close"><span aria-hidden="false">返回</span>
                            </button>
                        </div>
                    </div>
            </form>
        </div>

引入js和css（注意引入的时候用压缩好的min.js包），资料的下载地址：https://download.csdn.net/download/select_bin/10559482

js在提交的时候绑定事件：

//自己定义控件绑定校验鼠标移开就校验，自己重新赋值开关变量值binded=true。默认配置为提交时候校验。
            $("#addFormTab").validationEngine('attach', {binded : true} );

表单提交的时候校验：

var validateFlag = $('#addFormTab').validationEngine('validate');
    if (!validateFlag) {
        return;
    }

参考文档：http://www.runoob.com/jquery/jquery-plugin-validate.html