jquery.form.js+jquery.validation.js实现表单校验和提交

 

一、jquery引用

主要用到3个js：

jquery.js

jquery.form.js

jquery.validation.js

另外，为了校验结果提示本地化，还需要引入jquery.validate对应的mesage_zh.js。

这个几个文件的地址就不一一整理了，可以在官网上去下载，也可以在CathyCMS项目中拷贝。

 

二、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>

　　

三、表单校验部分脚本

这个页面要求角色名称必填，如果校验不合格在当前页面给出提示；如果校验合格就提交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>

　　

四、后台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;
    }