validate.js(validatejs官网)
如何使用validate.js进行动态添加和移除表单验证信息
1,动态添加验证规则
// 添加
$("#addConnectUser").rules("add",{rules:{required:true,isString:true},messages:{required:"用户名为必填项",isString:"请输入规范字符"}});
// 移除
$("#addConnectUser").rules('remove','required');
在此我要讲一下为什么有一个isString验证规则；这个是为了限制表单中input的输入规则；比如:不允许特殊字符，或者一些特殊的要求；这个isString是自己配置的
jQuery.validator.addMethod("isString", function(value, element) {
return this.optional(element) || (inputTest.test(value));
},"请输入规范内容");
// 此处的inputTest为你自定义的验证规则
2,如何给已经添加了表单验证的选项移除验证规则;
$("#addConnectUser").rules("remove",'required');
//再次添加可以直接用
$("#addConnectUser").rules("add",'required');
Jquery.validate.js实现前端表单验证
jquery.validate.js表单验证
官方网站：
API:
当前版本：1.5.5
需要JQuery版本：1.2.6+, 兼容 1.3.2
script src="../js/jquery.js" type="text/javascript"/script
script src="../js/jquery.validate.js" type="text/javascript"/script
(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性
(7)number:true 必须输入合法的数字(负数，小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10
例子：自定义密码验证的规则
jquery.validate.js用法错误信息怎么获取
你好，错误信息一般都已经封装好了，但是也是可以获取到得，可以使用自身的一个函数
$('#form1').validate({
focusCleanup:true,//clear?the?error?message?when?the?error?element?get?focus?again.?
//onkeyup:false,?
??rules:{
?????txtNumber:{
????????required:true?,
????????asinValid:true?
?????},
?????txtNumber2:{
?????required:true?,
?????tagValid:true?
?????}
??},
??messages:{
????txtNumber:{
?????required:"必须填写",
?????asinValid:"asin格式无效"
????},
????txtNumber2:{
????required:"必须填写",
????tagValid:"tag?格式不对"
????}
??},
??errorPlacement:?function(error,?element)?{???
????????//获取错误信息，可以修改错误信息显示位置，显示内容??
????????if?(element.attr("name")?==?"txtNumber"?)??{
?????????????
????????????error.appendTo($('#txtNumber').html?());??
????????}???
????????else???????
????????????error.insertAfter(element);???
??}
});
希望可以帮助到你
jquery.validate.js只能对表单进行验证吗
验证的 规则需要自己写。验证的元素是自己定的 。
以下 是一个完整的 注册验证 C# 异步验证
$(document).ready(function ()
{
// 页面加载时调用
$(function ()
{
$('#registerform').validate({
debug: true,
rules: {
txtEmail: {
required: true,
email: true,
maxlength: 40,
remote: {
url: "../common/registandlogin.ashx?cmd=email", //后台处理程序
type: "get", //数据发送方式
dataType: "json", //接受数据格式
data: {//要传递的数据
emailcode: function ()
{
return $("#txtEmail").val();
}
}
}
},
txtUserPwd: {
required: true,
maxlength: 18,
minlength: 6
},
txtRUserPwd: {
required: true,
equalTo: "#txtUserPwd"
},
txtPhone: {
required: true,
minlength: 7,
maxlength: 13,
isMobile: true
},
txtCheck: "required",
captcha: {
required: true,
remote: {
url: "../common/registandlogin.ashx?cmd=captcha", //后台处理程序
type: "get", //数据发送方式
dataType: "json", //接受数据格式
data: {//要传递的数据
vcode: function ()
{
return $("#txtcaptcha").val();
}
}
}
}
},
messages: {
txtEmail: {
required: "邮箱不能为空！",
email: "邮箱格式不正确！",
maxlength: "最长40个字符！",
remote: "很遗憾，您输入的邮箱已被使用！"
},
txtUserPwd: {
required: "密码不能为空！",
maxlength: "最长为18个字符！",
minlength: "最短为6个字符！"
},
txtRUserPwd: {
required: "密码不能为空！",
equalTo: "两次输入密码不相同！"
},
txtPhone: {
required: "电话不能为空！",
minlength: "最少7个数字！",
maxlength: "最长13个数字！",
isPhone: "联系电话格式格式不正确！"
},
txtCheck: {
required: "请阅读用户协议！"
},
captcha: {
required: "请输入验证码！",
remote: "验证码输入错误！"
}
},
validClass: "sucess",
errorClass: "error",
errorElement: "p",
focusCleanup: true, //被验证的元素获得焦点时移除错误信息
errorPlacement: function (error, element)
{
error.appendTo(element.parent());
},
submitHandler: function (form)
{
var formData = $(form).serialize();
$.ajax({
cache: false,
type: "POST",
url: "../common/registandlogin.ashx?cmd=addtk=" + (new Date()).getTime(),
data: formData,
error: function (request)
{
alert('链接失败.');
},
success: function (data)
{
if (data == "true")
{
location.href = 'memberlogin.aspx?email=' + $("#txtEmail").val();
} else
{
alert('注册失败！');
}
}
});
},
success: function (p)
{
p.html(" ").addClass("sucess");
}
});
//所有使用“.registerText”样式的文本框加上效果，获得焦点文本框变成淡黄色
$(".registerText").focus(function ()
{
$(this).css("background-color", "#FFFFCC").blur(function ()
{
$(this).css("background-color", "#FBFBFB");
});
});
$(".registerText_yzm").focus(function ()
{
$(this).css("background-color", "#FFFFCC").blur(function ()
{
$(this).css("background-color", "#FBFBFB");
});
});
});
});
jquery validate js怎么用的??
jquery.validate.js是jquery下的一个验证插件，功能比较强大
1、默认校验规则
(1)required:true 必输字段?
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值?
(3)email:true 必须输入正确格式的电子邮件?
(4)url:true 必须输入正确格式的网址?
(5)date:true 必须输入正确格式的日期?
(6)dateISO:true 必须输入正确格式的日期(ISO)，例如：2009-06-23，1998/01/22 只验证格式，不验证有效性?
(7)number:true 必须输入合法的数字(负数，小数)?
(8)digits:true 必须输入整数?
(9)creditcard: 必须输入合法的信用卡号?
(10)equalTo:"#field" 输入值必须和#field相同?
(11)accept: 输入拥有合法后缀名的字符串（上传文件的后缀）?
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)?
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)?
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)?
(15)range:[5,10] 输入值必须介于 5 和 10 之间?
(16)max:5 输入值不能大于5?
(17)min:10 输入值不能小于10
2、默认的提示
?
messages:?{?
required:?"This?field?is?required.",?
remote:?"Please?fix?this?field.",?
email:?"Please?enter?a?valid?email?address.",?
url:?"Please?enter?a?valid?URL.",?
date:?"Please?enter?a?valid?date.",?
dateISO:?"Please?enter?a?valid?date?(ISO).",?
dateDE:?"Bitte?geben?Sie?ein?g眉ltiges?Datum?ein.",?
number:?"Please?enter?a?valid?number.",?
numberDE:?"Bitte?geben?Sie?eine?Nummer?ein.",?
digits:?"Please?enter?only?digits",?
creditcard:?"Please?enter?a?valid?credit?card?number.",?
equalTo:?"Please?enter?the?same?value?again.",?
accept:?"Please?enter?a?value?with?a?valid?extension.",?
maxlength:?$.validator.format("Please?enter?no?more?than?{0}?characters."),?
minlength:?$.validator.format("Please?enter?at?least?{0}?characters."),?
rangelength:?$.validator.format("Please?enter?a?value?between?{0}?and?{1}?characters?long."),?
range:?$.validator.format("Please?enter?a?value?between?{0}?and?{1}."),?
max:?$.validator.format("Please?enter?a?value?less?than?or?equal?to?{0}."),?
min:?$.validator.format("Please?enter?a?value?greater?than?or?equal?to?{0}.")?
},
如需要修改，可在js代码中加入：
?
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}?的值")?
});
3、使用方法
1）将校验规则写到控件中
?
script?src="../js/jquery.js"?type="text/javascript"/script?
script?src="../js/jquery.validate.js"?type="text/javascript"/script?
script?src="./js/jquery.metadata.js"?type="text/javascript"/script?
$().ready(function()?{?
$("#signupForm").validate();?
});?
form?id="signupForm"?method="get"?action=""?
label?for="firstname"Firstname/label?
input?id="firstname"?name="firstname"?class="required"?/?
label?for="email"E-Mail/label?
input?id="email"?name="email"?class="required?email"?/?
label?for="password"Password/label?
input?id="password"?name="password"?type="password"?class="{required:true,minlength:5}"?/?
label?for="confirm_password"确认密码/label?
input?id="confirm_password"?name="confirm_password"?type="password"?class="{required:true,minlength:5,equalTo:'#password'}"?/?
input?class="submit"?type="submit"?value="Submit"/?
/form
2）将校验规则写到代码中
?
$().ready(function()?{?
$("#signupForm").validate({?
rules:?{?
firstname:?"required",?
email:?{?
required:?true,?
email:?true?
},?
password:?{?
required:?true,?
minlength:?5?
},?
confirm_password:?{?
required:?true,?
minlength:?5,?
equalTo:?"#password"?
}?
},?
messages:?{?
firstname:?"请输入姓名",?
email:?{?
required:?"请输入Email地址",?
email:?"请输入正确的email地址"?
},?
password:?{?
required:?"请输入密码",?
minlength:?jQuery.format("密码不能小于{0}个字符")?
},?
confirm_password:?{?
required:?"请输入确认密码",?
minlength:?"确认密码不能小于5个字符",?
equalTo:?"两次输入密码不一致不一致"?
}?
}?
});?
});?
//messages处，如果某个控件没有message，将调用默认的信息?
form?id="signupForm"?method="get"?action=""?
label?for="firstname"Firstname/label?
input?id="firstname"?name="firstname"?/?
label?for="email"E-Mail/label?
input?id="email"?name="email"?/?
label?for="password"Password/label?
input?id="password"?name="password"?type="password"?/?
label?for="confirm_password"确认密码/label?
input?id="confirm_password"?name="confirm_password"?type="password"?/?
input?class="submit"?type="submit"?value="Submit"/?
/form
validator.js remote 返回什么类型
validator.js?remote 返回类型是根据表单比较的结果一般是返回字符串类型。
有时候不仅仅对表单所录入的信息进行验证还需要将录入的值与数据库进行比较，这时就需要借助remote方法来实现。以下介绍?jquery.validate.js的后台验证的remote方法，准备工作，前台页面：
script src="test/jquery.js" type="text/javascript"/script
script src="test/jquery.validate.js" type="text/javascript"/script
script src="test/jquery.validate.message_cn.js" type="text/javascript"/script
/head
body
form name="test" id="testform" method="get" action="get.php"
fieldset
? legend title="用户注册(User Register)"用户注册(User Login)/legend
? ?p
? ? ? ?label for="name"用户名：/label
? ? ? ?input id="name" name="name" type="text" /
? ?/p
? ?p
? ? ? ?label for="mail"邮箱:/label
? ? ? ?input id="mail" name="mail" type="password" /
? ?/p
? ?p
? ? ? ?label for="password"密码：/label
? ? ? ?input id="password" name="password" type="password" /
? ?/p
? ?p
? ? ? ?label for="repassword"重复密码：/label
? ? ? ?input id="repassword" name="repassword" type="password" /
? ?/p
? ?p
? ? ? ?label for="hash"邀请码：/label
? ? ? ?input id="hash" name="hash" type="text" /
? ?/p
p
? ? ? ?label for="sel"选择：/label
select id="sel" name="sel"
option value=""请选择/option
option value="1"选择1/option
option value="2"选择2/option
option value="3"选择3/option
option value="4"选择4/option
/select
? ?/p
? ?p
? ? ? ?label for="type"用户类型：/label
? ? ? ?spaninput ?name="type" type="radio" value="1" /类型1/span
? ? ? ?spaninput ?name="type" type="radio" value="2" /类型2/span
? ? ? ?spaninput ?name="type" type="radio" value="3" /类型3/span
? ?/p
? ?p
? ? label for="submit"nbsp;/label
? ? input class="submit" type="submit" value="注册"/
? ?/p
? ?/fieldset
/form
要实现的效果：
验证代码：
script type="text/javascript"
$(function(){
$("#testform").validate({
rules : {
? ? ? ? ????name : {
? ? ? ? ? ? ????????required : true
? ? ? ? ????},
? ? ? ? ????password: {
????????required: true,
????????minlength: 5
????},
????repassword: {
????????required: true,
????????minlength: 5,
????????equalTo: "#password"
????},
????hash: {
????????required: true,
????????remote: 'checkhash.php'
????},
????sel: {
????????remote: 'checksel.php'
????},
????type: {
????????remote:{
????????????url: "changeusertype.php",
????????????type: "get",
????????????dataType: 'json',
????????data: {
????????????'type': function(){return $('input[name="type"]:checked').val();}
????????????}
????}
????????}
? ? },
? ? messages : {
? ? ? ? name : {
? ? ? ? ? ? ????required : '必填'
? ? ? ? },
? ? ? ? password: {
????required: '必填',
????minlength: '最少5个字符'
},
repassword: {
????required: '必填',
????minlength: '最少5个字符',
????equalTo: '两次输入的密码不一样'
},
hash: {
????required: '必填',
????remote: '邀请码不正确'
},
sel: {
????remote: '选择不正确'
},
type: {
????remote: '类型不可更改'
}
? ? },
focusInvalid: true,
? ? /*指定错误信息位置*/
errorPlacement: function (error, element) {
? ? ? ?????error.appendTo(element.closest("p"));
},
//设置错误信息存放标签
errorElement: "em",
? ? submitHandler: function(form) {
}
????});
})
/script
验证结果如下：