jqueryvalidate(jqueryvalidate自定义规则)

http://www.itjxue.com  2023-01-25 17:02  来源:未知  点击次数: 

如何使用jQuery的validate

一、使用Jquery.Validate进行验证方法

$(document).ready(function () {

$("#pageForm").validate({

rules: {

DictKey: { required: true, maxlength: 10 },

DictContent: { required: true, maxlength: 10 }

},

messages: {

DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") },

DictContent: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符") }

},

submitHandler: function (form) {

form.submit();

}

})

})

DictKey ,DictContent:指需要验证的控件ID

submitHandler :指通过验证后运行的函数,里面写入表单要提交的函数,否则表单不会提交

二、列出常用默认验证规则

(1)required:true 必输字段

(2)email:true 必须输入正确格式的电子邮件

(3)url:true 必须输入正确格式的网址

(4)date:true 必须输入正确格式的日期

(5)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性

(6)number:true 必须输入合法的数字(负数,小数)

(7)digits:true 必须输入整数

(8)creditcard: 必须输入合法的信用卡号

(9)equalTo:"#field" 输入值必须和#field相同

(10)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)

(11)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)

(12)minlength:10 输入长度最小是10的字符串(汉字算一个字符)

(13)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)

(14) equalLength:10 输入长度必须是10

(14)range:[5,10] 输入值必须介于 5 和 10 之间

(15)max:5 输入值不能大于5

(16)min:10 输入值不能小于10

三、使用ajax方法验证输入值是否存在

当文本框输入值时,或改变输入值时会自动到Server去验证输入值是否在数据库中存在

JS代码如下:

DictKey: { required: true, maxlength: 10,

remote: { //验证用户名是否存在

type: "POST",

url: '@Url.Content("~/Account/Test/")' //servlet

}

},

DictKey: { required: "不能为空", maxlength: jQuery.format("不能超过{0}个字符"),remote:"用户名已被注册"},

Server端:

[HttpPost]

public JsonResult Test(string DictKey) //DictKey即要验证控件的ID值

{

bool result;

if (DictKey == "a")

{

result = true;

}

else

{

result = false;

}

return Json(result);

}

根据Server端返回的True,False来决定验证是否通过

四、非submit按钮结合Jquery.Form进行提交

如果不是submit提交按钮,比如单击某个按钮触发表单验证,这时表单验证可用如下方式

function validateForm() {

//validate方法参数可选

return $("#form1").validate({

rules: {

},

messages:{

}

}).form();

}

function doSubmit(){

//do other things

//验证通过后提交

if(validateForm()){

form.submit()

//这边可以结合Jquery.Form进行AjaxSubmit方式异步提交

$("#UpdateForm").AjaxSubmit (function(){

Alert(“AjaxForm提交完成”)

});

}

}

jquery.validate验证样式怎么用css控制

首先,jquery.validate是一个验证表单的方法,它主要的功能是为表单提供简单的表单提交的验证方法,比如必填项的提示、密码是否一致、邮箱格式等等;

基本的CSS样式的变化,即在style/style中根据id或者class来写格式控制;

表单验证中自带的一些css格式可以在谷歌浏览器中的开发模式中找到其对应的id或者class来修改,该图中验证提示词的id=cname-error;

对id=cname-error改变css,效果为第一行;注意到有一个.error的存在,它是对所有报错的样式进行控制;改完后color样式可能不能改成功,不妨在你的color后加一个!important。

如果不怕麻烦,可以去改导入的jquery.vliadate.js文件。

jquery validate 怎么验证单选框

1、下载并导入js

script src="jquery.js" type="text/javascript"/script

script src="jquery.validate.js" type="text/javascript"/script

script src="jquery.metadata.js" type="text/javascript"/script

2、初始化参数

$.validator.setDefaults( {

//验证成功后回调参数对象

submitHandler: function() {/ /回调方法

document.forms[0].submit(); //验证通过后提交

}

} );

$.metadata.setType("attr", "validate");

//单选框、复选框,用validate设置

//详细见单选复选例子

$("form").validate({//绑定需要验证的form表单

//自定义参数对象

errorPlacement: function(error, element) {//设置错误提示消息位置,可选

error.appendTo($(element).parents("td")[0]);

}

} );

3、设定错误信息样式

style type="text/css"

label.error {

color:red;

display:block

}

/style

注意,样式名固定为

label.error,样式内容可修改。

4、表单元素绑定验证

绑定方法:

class=”XXX”或xxx=”XXX”,

例如

input name="email" class="email"/

jquery validate 自定义验证怎么用

你自己设置验证规则,然后把验证规则放在一个函数里面,添加一个自定义验证方法名就行了。例如:

jQuery.validator.addMethod("idCardValidate", function(value, element) {

return this.optional(element) || idCardValidate(value);

}, "请正确输入您的身份证号码");

“idCardValidate”这就是jquery validate自定义验证的方法名;

idCardValidate(value)这个就是你验证规定的函数,函数返回true或者false

jquery validate 自定义验证 怎么用

jquery validate自定义验证需要实现以下方法:

jQuery.validator.addMethod("验证名", function(value, element) {验证规则}

回调方法自带的两个参数分别为对应控件的value值和该控件的dom元素。

具体实现参考下面的例子:

//检测手机号是否正确??

jQuery.validator.addMethod("isMobile",?function(value,?element)?{?

????var?length?=?value.length;??

????var?regPhone?=?/^1([3578]\d|4[57])\d{8}$/;??

????return?this.optional(element)?||?(?length?==?11??regPhone.test(?value?)?);????

},?"请正确填写您的手机号码");

自定义验证规则的使用和默认规则是一样的:

rules:{

????????????name:{

????????????????required:true,

????????????????minlength:2,

????????????????maxlength:10

????????????},

????????????tel:{

????????????????required:true,

????????????????minlength:7,

????????????????maxlength:11,

????????????????isMobile:true

????????????}

}

(责任编辑:IT教学网)

更多

推荐Oracle认证文章