使用validate进行表单验证
程序员文章站
2022-03-01 14:51:26
...
1、Ajax异步请求
$().ready(function() {
$("#saveProject").validate({
onkeyup: false,
//失去焦点验证
onfocusout: function(element) { $(element).valid(); },
rules: {
reality_name:{
required: true,
remote: {
url: "/newr/supervisor/project/verifyUserByRealityName",
type: "post",
dataType: "json",
data: {
reality_name: function () {
return $("#reality_name").val(); //这个是取要验证的数据
}
},
dataFilter: function (data) { //判断控制器返回的内容
return data;
}
}
},
amount:{
required: true,
number:true
},
period:{
required: true,
digits:true
},
invest_period:{
required: true,
digits:true
},
start_time:{
required: true,
dateISO:true
},
begin_interest:{
required: true,
dateISO:true
},
apr:{
required: true,
number:true
},
ticket_no:{
required: true,
remote: {
url: "/newr/supervisor/project/verifyTicketByTicketNo",
type: "post",
dataType: "json",
data: {
ticket_no: function () {
return $("#ticket_no").val(); //这个是取要验证的数据
}
},
dataFilter: function (data) { //判断控制器返回的内容
return data;
}
}
},
invest_rate:{
required: true,
number:true
},
loanUsage:{
required: true
},
guarantee_no:{
required: true
},
pact_no:{
required: true
}
},
messages: {
reality_name:{
required: "请输入借款人",
remote:"借款人不存在,请核对"
},
amount:{
required: "请输入贷款金额",
number:"金额输入不合法"
},
period:{
required: "请输入贷款期限",
digits:"贷款期限不合法"
},
invest_period:{
required: "请输入募集期",
digits:"募集期不合法"
},
start_time:{
required: "请输入发标日",
dateISO:"发标日不合法"
},
begin_interest:{
required: "请输入起息日",
dateISO:"起息日不合法"
},
apr:{
required: "请输入投资人年化利率",
number:"投资人年化利率不合法"
},
ticket_no:{
required: "请输入商票编号",
remote:"商票不存在,请核对"
},
invest_rate:{
required: "请输入融资年化利率",
number:"融资年化利率不合法"
},
loanUsage:{
required: "请输入贷款用途"
},
guarantee_no:{
required: "请输入担保函编号"
},
pact_no:{
required: "请输入合同编号"
}
}
})
});
$().ready(function() {
$("#saveProject1").validate({
onkeyup: false,
//失去焦点验证
onfocusout: function(element) { $(element).valid(); },
rules: {
reality_name:{
required: true,
remote: {
url: "/newr/supervisor/project/verifyUserByRealityName",
type: "post",
dataType: "json",
data: {
reality_name: function () {
return $("#reality_name1").val(); //这个是取要验证的数据
}
},
dataFilter: function (data) { //判断控制器返回的内容
return data;
}
}
},
amount:{
required: true,
number:true
},
period:{
required: true,
digits:true
},
invest_period:{
required: true,
digits:true
},
start_time:{
required: true,
dateISO:true
},
begin_interest:{
required: true,
dateISO:true
},
apr:{
required: true,
number:true
},
ticket_no:{
required: true
},
invest_rate:{
required: true,
number:true
},
loanUsage:{
required: true
},
guarantee_no:{
required: true
},
pact_no:{
required: true
},
description:{
required: true
},
repaying_source:{
required: true
}
},
messages: {
reality_name:{
required: "请输入借款人",
remote:"借款人不存在,请核对"
},
amount:{
required: "请输入贷款金额",
number:"金额输入不合法"
},
period:{
required: "请输入贷款期限",
digits:"贷款期限不合法"
},
invest_period:{
required: "请输入募集期",
digits:"募集期不合法"
},
start_time:{
required: "请输入发标日",
dateISO:"发标日不合法"
},
begin_interest:{
required: "请输入起息日",
dateISO:"起息日不合法"
},
apr:{
required: "请输入投资人年化利率",
number:"投资人年化利率不合法"
},
ticket_no:{
required: "请输入商票编号"
},
invest_rate:{
required: "请输入融资年化利率",
number:"融资年化利率不合法"
},
loanUsage:{
required: "请输入贷款用途"
},
guarantee_no:{
required: "请输入担保函编号"
},
pact_no:{
required: "请输入合同编号"
},
witness_bank:{
required: "请勾选银行见证信息"
},
description:{
required: "请输入项目描述"
},
repaying_source:{
required: "请输入还款来源"
}
}
})
});
总结:
1、validate 验证的是name属性
2、id就是隐藏掉也不能相同,比如要获取值,则要去不同的值。
3、ajax异步验证remote的返回值为boolean
如果不能获取用单引号’ ’
5、 onkeyup: false, //屏蔽键盘验证
onfocusout:function(element){$(element).valid(); },
推荐阅读
-
jQuery.Validate表单验证插件的使用示例详解
-
vee-validate vue 2.0自定义表单验证的实例
-
Vue循环组件加validate多表单验证的实例
-
vue表单验证你真的会了吗?vue表单验证(form)validate
-
Thinkphp5框架使用validate实现验证功能的方法
-
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
-
vue中vee validate表单校验的几种基本使用
-
详解jquery validate实现表单验证 (正则表达式)
-
Vue表单验证插件Vue Validator使用方法详解
-
jQuery Validate让普通按钮触发表单验证的方法