jquery表单校验插件需要用到什么方法
2个回答
推荐于2016-08-23 · 知道合伙人影视综艺行家
关注
展开全部
remote是远程验证:比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。在访问指定的url时,会自动把当前字段的值做为参数(以字段name为key)传递过去。
某些属性值中的引号不能省略,否则出错。如accept、equalTo等。
remote使用时遇到的问题:添加用户时需要验证用户名是否存在,当添加上一个用户后,在不离开该页面的情况下,再次添加该用户名的用户,validate不能提示该用户已存在,因为缓存的原因,jquery仍认为该用户名可用。解决方法是在页面中添加:$().ready(function(){
$.ajaxSetup ({
cache: false //关闭AJAX相应的缓存
}); // 关闭缓存功能
});
添加
修改错误信息提示位置:
修改Jquery validate 的错误提示位置,把错误提示在input内,当获得鼠标焦点的时候清楚提示信息。
具体使用方法:
var validator = $("#myContainerForm").validate({
focusCleanup:true,//clear the error message when the error element get focus again.
onkeyup:false,
errorPlacement: function(error, element) {
showErrorMesssgeDiv(error,element);
},
rules:{
name:{
required: true
}
},
messages: {
name:{
required:populateErrorMessage($("#errorRequiredMessage").val(), $("#containerNameTitle").val())
}
}
});
自定义验证规则
除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的,语法 为:
jQuery.validator.addMethod("name",function,message)
其中:
name为验证规则的名称
function定义验证的规则。参数有?。返回值为?。
message是验证失败时的提示信息。
指定错误提示内容
更改默认的提示内容
jQuery.extend(jQuery.validator.messages, {
required: "必填字段",
remote: "请指定一个不重复的值",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
个别表单改变提示内容(只对当前表单有效)
方法一:
<input type="file" name="parResource"
class="{required: true, accept: 'zip', messages: {required: '请选择文件', accept:'请选择正确的文件'}}">
方法二:
$(function() {
$("#testForm").validate({
messages:{
loginName: {
required: "必选字段2"
},
email: {
required: '必选字段22',
email: "请输入正确格式的电子邮件2"
}
}
});
});
改变错误消息显示样式
指定label.error的样式就可以了,如下:
<style type="text/css">
label.error{
margin-left: 10px;
color: red;
}
</style>
说明:label.error指class为error的label元素,如:<label for="resource" class="error">
某些属性值中的引号不能省略,否则出错。如accept、equalTo等。
remote使用时遇到的问题:添加用户时需要验证用户名是否存在,当添加上一个用户后,在不离开该页面的情况下,再次添加该用户名的用户,validate不能提示该用户已存在,因为缓存的原因,jquery仍认为该用户名可用。解决方法是在页面中添加:$().ready(function(){
$.ajaxSetup ({
cache: false //关闭AJAX相应的缓存
}); // 关闭缓存功能
});
添加
修改错误信息提示位置:
修改Jquery validate 的错误提示位置,把错误提示在input内,当获得鼠标焦点的时候清楚提示信息。
具体使用方法:
var validator = $("#myContainerForm").validate({
focusCleanup:true,//clear the error message when the error element get focus again.
onkeyup:false,
errorPlacement: function(error, element) {
showErrorMesssgeDiv(error,element);
},
rules:{
name:{
required: true
}
},
messages: {
name:{
required:populateErrorMessage($("#errorRequiredMessage").val(), $("#containerNameTitle").val())
}
}
});
自定义验证规则
除了内置的验证规则,validation还允许自定义验证规则。这是通过validation的addMethod()方法实现的,语法 为:
jQuery.validator.addMethod("name",function,message)
其中:
name为验证规则的名称
function定义验证的规则。参数有?。返回值为?。
message是验证失败时的提示信息。
指定错误提示内容
更改默认的提示内容
jQuery.extend(jQuery.validator.messages, {
required: "必填字段",
remote: "请指定一个不重复的值",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),
minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),
rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),
range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),
max: jQuery.validator.format("请输入一个最大为 {0} 的值"),
min: jQuery.validator.format("请输入一个最小为 {0} 的值")
});
个别表单改变提示内容(只对当前表单有效)
方法一:
<input type="file" name="parResource"
class="{required: true, accept: 'zip', messages: {required: '请选择文件', accept:'请选择正确的文件'}}">
方法二:
$(function() {
$("#testForm").validate({
messages:{
loginName: {
required: "必选字段2"
},
email: {
required: '必选字段22',
email: "请输入正确格式的电子邮件2"
}
}
});
});
改变错误消息显示样式
指定label.error的样式就可以了,如下:
<style type="text/css">
label.error{
margin-left: 10px;
color: red;
}
</style>
说明:label.error指class为error的label元素,如:<label for="resource" class="error">
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询