validate插件使用remote做数据唯一性校验

原创已于 2022-03-08 14:32:53 修改 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2016-07-24 10:27:24 首次发布

本文介绍如何使用jQuery进行表单验证，并通过Ajax实现远程校验功能，确保输入的唯一性。文中详细展示了如何配置验证规则及消息提示，包括自定义远程验证方法和数据过滤逻辑。

$(function(){

$("#form1").validate({

rules:{
"bgtNumber":{
required:true,
remote:{
url:"${cp}/billGoodsTransport/checkUnique.htm",//传值到后台比较的url
type:"post",
data:{
"bgtNumber":function(){return $("#huoquanNum").val();},//后台要接受的bgtNumber参数取值
"isInsert":function(){return 0;}//要传的参数取值
},
dataType:"json",
cache:false,
dataFilter:function(data){
console.log(data);
console.log(data == 1);
if(data == 1)
return "true";
else
return "false";
}
//dataFilter为后台返回值预处理，

}
}
},

messages:{
"bgtNumber":{
remote:"货权编号已经存在!"
}
}

});

也可以用get方法在url后加上要传的参数、

后台返回值不一定是true和false，可以做预处理

另一种：

$(".item1").each(function (i,e) {
    $(this).rules("add", {remote: {
            url: "${cp}/outSourceContract/checkContractComtype",
            type: "GET",
            data: {
                "projectCode": function (){return $('.projectNo').val()},
                "contractComtype": function (){return $(e).val()}
            },
            dataType: "JSON",
            cache: false,
            dataFilter: function (data) {
                if (data == 'false') {
                    $.validator.messages.remote = '项目里不存在该构件类型';
                    return "false";
                }else {
                    return "true";
                }
            }
        }});
});