前后端表单校验实例

来源：互联网发布：发票数据导出excel 编辑：程序博客网时间：2024/05/26 22:10

前端

前端使用jQuery.validate进行表单校验，submitHandler来控制表单提交方式。

使用步骤：

导包

    <script src="/static/js/jquery-1.11.0.min.js"></script>    <script src="/static/js/jquery.validate.min.js"></script>

编辑扩展插件，以实现自定义校验规则

    (function ($) {        var _validate = $.fn.validate;        $.fn.cmsvalidate = function (opts, callback) {            /*自定义的一些验证规则*/            var _defaultOpts = {                rules: {                    name: "required",                    info: "required",                    age: {                        required: true,                        minlength: 2                    },                    confirmPwd: {                        equalTo: "#password"                    },                    email: "email"                },                messages: {                    name: "用户名不能为空",                    info: "info不能为空",                    age: {                        required: "密码不能为空",                        minlength: "密码至少为6位"                    },                    confirmPwd: "我去，你两次的密码不一样",                    email: "你密码的格式不对啊"                },                errorElement: "span",                errorClass: "errorContainer",                submitHandler: function (form) {                    console.log("submitHandler");                    //异步提交或直接提交                    callback ? callback() : $(form).submit();                }            };            $.extend($.fn.validate.prototype, _defaultOpts);            _validate.call(this, _defaultOpts);        }    })(jQuery)

在onload方法中使用该校验

    //异步提交方法    function sub() {        $.get('/m/test/sub', {            name: $('#name').val(),            age: $('#age').val(),            info: $('#info').val()        }, function (data) {            if (data && data.result == 'success') {                mui.toast("success");                location.reload()            } else {                data.forEach(function (e) {                    mui.alert(e.field + e.defaultMessage);                })            }        });    }     $(function() {        $("#addForm").cmsvalidate({}, sub);//传入回调函数，异步提交    });

后端，SpringMVC

后端利用hibernate.validate来进行校验，只提供Controller层的实例。@Validated 与BindingResult对象结合使用，ObjectError对象包含和校验失败的属性名和失败信息。

@RequestMapping("sub")public void sub(@Validated User user, BindingResult br, HttpServletResponse response){    if(br.hasErrors()){        List<ObjectError> errors =  br.getAllErrors();        AjaxResponseUtils.render(response,errors);    }else{        System.out.println(JSON.toString(user));        AjaxResponseUtils.renderSuccess(response);    }}

阅读全文

0 0