jquery.form.js+jquery.validation.js實現表單校驗和提交

 

1、jquery引用

主要用到3個js：

jquery.js

jquery.form.js

jquery.validation.js

另外，爲了校驗結果提示本地化，還須要引入jquery.validate對應的mesage_zh.js。

這個幾個文件的地址就不一一整理了，能夠在官網上去下載，也能夠在CathyCMS項目中拷貝。

 

2、html頁面

權限管理的新增角色頁面，不考慮資源樹部分的話，這個頁面的內容和交互比較簡單，咱們就以這個頁面爲例，看下怎麼實現表單校驗和異步提交。

 <form id="myForm" class="form-horizontal"  th:object="${role}">
        <input type="hidden" th:field="*{roleId}">
        <fieldset>
            <div class="control-group">
                <label class="control-label" for="name">角色名稱</label>
                <div class="controls">
                    <input type="text" class="input-xlarge" th:field="*{name}">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="description">角色描述</label>
                <div class="controls">
                    <textarea class="input-xlarge" th:field="*{description}" rows="3"></textarea>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="select01">Client</label>
                <div class="controls">
                    <select id="select01">
                        <option>-- Select client --</option>
                        <option>Bad Robot</option>
                        <option>Evil Genius</option>
                        <option>Monsters Inc</option>
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button type="submit" class="btn btn-primary">保存</button>
                <button class="btn">返回列表</button>
            </div>
        </fieldset>
    </form>

　　

3、表單校驗部分腳本

這個頁面要求角色名稱必填，若是校驗不合格在當前頁面給出提示；若是校驗合格就提交ajax請求。

 

<script type="text/javascript">
        $.validator.setDefaults({
            submitHandler: function(form) {
                $(form).ajaxSubmit({
                    url:"[[@{/role/save}]]",
                    type:"post",
                    dataType:"json",
                    success:function(json){
                        if(json!=null&&json.returncode==0){
                            window.location.href="[[@{/role/list}]]";
                        }else{
                            alert("保存失敗");
                        }
                    }
                });
            }
        });

        $().ready(function () {
            $("#myForm").validate({
                rules: {
                    name: "required"
                },
                messages: {
                    name: "請輸入角色名稱"
                }
            });
        });
    </script>

　　

4、後臺action

@RequestMapping("/save")
    @ResponseBody
    public JsonResult save(CmsRole role){
        JsonResult jsonResult=new JsonResult(){{
            setReturncode(-1);
            setMessage("保存失敗");
        }};

        int result;
        if(role.getRoleId()==null||role.getRoleId()==0){
            result=roleService.insert(role);
        }else{
            result=roleService.update(role);
        }

        if(result>0){
            jsonResult.setReturncode(0);
            jsonResult.setMessage("保存成功");
        }

        return jsonResult;
    }