如何使用jquery--validate框架添加自定义的验证规则

许高峻
2023-12-01

表单验证中如果数据库中已经存在的用户,当我们在注册界面再次输入已经存在的用户,就会出现如”您输入的用户名已经存在,请重新输入…”的提示,如下我们用一个jquery–validate框架添加一个自定义的验证规则。

//给validate插件添加一个验证的方法(添加一个验证的规则)
        $.validator.addMethod(
            "checkUsername",//自定义校验规则的名称
            function(value,element,params){//自定义校验规则的实现
                console.log(params);
                //value)表单元素值
                //element)校验的元素对象
                //params)校验规则输入的参数
                var flag = true;
                //发送一个Ajax,到服务器进行验证用户存在
                $.ajax({
                    "async":false,//同步操作
                    "url":"${pageContext.request.contextPath}/checkUsername",
                    "type":"POST",
                    "data":{"username":value},
                    "dataType":"json",
                    "success":function(data){
                        flag = data.isExist;//true--存在  false--不存在
                    }
                });
                //需要返回值 false----该校验器校验失败    true---校验通过
                return !flag;
            }
        );
//使用自定义规则核心代码:
$(function() {
        $("#regForm").validate({
            rules : {
                "username" : {
                    "required" : true,
                    //checkUsername即为自定义的规则
                    "checkUsername":"ckuname"
                }
messages : {
                "username" : {
                    "required" : "用户名不能为空",
                    //checkUsername自定义的规则提示
                    "checkUsername":"用户名重复"
                },
 类似资料: