jqueryValidation使用

jq form表单前端校验可以使用jq插件jquery-validation.js。
具体的使用方法:

1.引入文件：

<link rel="stylesheet" href="../jquery-validation-1.15.0/dist/semantic.min.css" /><!--自己选择样式-->
<script src="../js/jquery-2.1.1.js"></script>
<script src="../jquery-validation-1.15.0/dist/jquery.validate.min.js"></script>
2.form表单定义

<form action="/scene/save" method="post" id="marketForm">
    <input type="hidden" name="id" value="${market.id!''}">
    <div class="info-div mt10">
        <div class="info-div2 wj_table">
            <div class="t-div addscreen" style="margin-top: 0px;">添加活动场景</div>
            <table class="info-box ppa-info-box" border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                <tr>
                    <td class="info-td_l in_l" width="200"><i class="co_re">*</i>场景名称：</td>
                    <td class="form clearfix">
                        <label class="fl">
                            <input type="text" value="${market.sceneName!''}" name="sceneName" >
                        </label>
                    </td>
                </tr>
                <tr class="over">
                    <td class="info-td_l in_l" width="200"><i class="co_re">*</i>场景标签：</td>
                    <td class="form">
                        <label>
                            <input type="text" value="${market.sceneLabel!''}" name="sceneLabel" >
                        </label>
                        <span class="pro_add_warn ml10"><i></i>例如：产品销售排行榜</span>
                    </td>
                </tr>
                <tr>
                    <td class="info-td_l in_l" width="200"><i class="co_re">*</i>场景别名：</td>                    <td class="form">
                        <label>
                            <input type="text" value="${market.sceneAlias!''}" name="sceneAlias" >
                        </label>
                        <span class="pro_add_warn ml10"><i></i>例如：清仓活动-清仓</span>
                    </td>
                </tr>
                <tr style="height: 170px">
                    <td class="info-td_l in_l" width="200"><i class="co_re">*</i>场景简介：</td>
                    <td class="form">
                        <textarea class="brief"  name="sceneIntroduce" >${market.sceneIntroduce!''}</textarea>
                    </td>
                </tr>
                <tr>
                    <td class="info-td_l in_l" width="200"><i class="co_re">*</i>场景UI：</td>
                    <td class="form">
                        <label>
                            <#--<input type="file" readonly class="addUi">-->
                                <img id="siteImg" width="240px" height="140px" src="${market.sceneImg!''}">
                            <input type="text" value="${market.sceneImg!''}" id="sceneImg" name="sceneImg" onclick="btnImageUpload()" />
                           <input type="hidden" name="imgids" id="imgids"/>
                        </label>
                        <span class="pro_add_warn ml10"><i></i>添加场景效果图</span>
                    </td>
                </tr>
                <tr class="over">
                    <td class="info-td_l in_l" width="200"><i class="co_re">*</i>场景终端：</td>
                    <td class="form">
                       <span class="sceneCheck"><input type="radio" name="sceneTerminalType" value="1" <#if market.sceneTerminalType?? && market.sceneTerminalType==2><#else>checked</#if>>PC端</span>
                       <span class="sceneCheck"><input type="radio" name="sceneTerminalType" value="2" <#if market.sceneTerminalType?? && market.sceneTerminalType==2>checked</#if>>移动端</span>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" class="submitBtn">
                        <a href="javascript:;" class="ppaMyBtn" onclick="saveSceneMarket()">保存</a>
                        <#--<input type="submit" value="保存" class="ppaMyBtn">-->
                        <a href="javascript:;"  id="fhlb">返回</a>
                        </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div></form>

3.校验字段限制和错误提示：

<script>


    $( document ).ready( function () {
        $( "#marketForm" ).validate( {
            rules: {

                sceneName: {
                    required: true,
                    maxlength: 32
                },
                sceneLabel: {
                    required: true,
                    maxlength: 32
                },
                sceneAlias: {
                    required: true,
                    maxlength: 32
                },
                sceneIntroduce: {
                    required: true,
                    maxlength: 1000,
                },
                sceneImg:"required",

            },
            messages: {

                sceneName: {
                    required: "请输入场景名称",
                    maxlength: "场景名称不得超过32个字符"
                },
                sceneLabel: {
                    required: "请输入场景标签",
                    maxlength: "场景标签不得超过32个字符"
                },
                sceneAlias: {
                    required: "请输入场景别名",
                    maxlength: "场景别名不得超过32个字符"
                },
                sceneIntroduce: {
                    required: "请输入场景简介",
                    maxlength: "场景简介不得超过1000个字符"
                },
                sceneImg: "请上传场景UI",
            },
            errorPlacement: function ( error, element ) {
                error.addClass( "ui red pointing label transition" );
                error.insertAfter( element.parent() );
            },
            highlight: function ( element, errorClass, validClass ) {
                $( element ).parents( ".row" ).addClass( errorClass );
            },
            unhighlight: function (element, errorClass, validClass) {
                $( element ).parents( ".row" ).removeClass( errorClass );
            }
        } );
    } );
</script>


4.结果



详细请参照官网
https://jqueryvalidation.org/