您的位置：首页 > Web前端 > JQuery

jquery.validate通过remote来实现ajax验证范例

2018-01-25 14:59 543 查看

jquery.validate可谓是个强大的表单验证插件，当然也完美支持ajax验证，这样可以方便、快速来实现检查用户名等等是否存在。

html/js源码部分：

[html] view
plain copy

<meta charset="utf-8" />

<!DOCTYPE html>

<html>

    <head>

    <title>Submit a form via AJAX</title>



<script src="js/jquery.min.js"></script>



    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>



</head>

<body>

<form action="" name="infos" id="infos">



    <p>用户名：<input type="text" name="username" id="username" /></p>



    <p><input type="submit" name="sub" /></p>



</form>



<script type="text/javascript">



$(function(){

    $('#infos').validate({

        debug:false,

        onkeyup:false,

        rules:{

            username:{

                required:true,

                remote:{

                    type:"POST",

                    url:"01.php", //请求地址

                    data:{

                        username:function(){ return $("#username").val(); }

                    }

                }

            }

        },

        messages:{

            username:{

                required:"用户名必填",

                remote:"用户名已存在"

            }

        },

        submitHandler:function(form){

            alert("验证通过");

        }

    });

});



</script>



</body>

</html>


@RequestMapping(value="/check")
@ResponseBody
public boolean check(HttpServletRequest request) throws Exception{
String code = request.getParameter("code").trim();
System.out.println("code = " + code);
return false;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航