如何使用jQuery的validate

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

成都创新互联公司是一家专注于网站制作、网站建设与策划设计,杞县网站建设哪家好?成都创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:杞县等地区。杞县做网站价格咨询:18982081108

$(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进行表单验证

第一步：

导入jquery.metadata.js和jquery.validate.js。

第二步：

在提交表单上加属性id=“tempForm"。

第三步：

将提交按钮改为type="button"，且加入onclick="submitForm()"属性。

第四步：

在script中加入方法submitForm。

function submitForm() {

if($("#tempForm").valid()) {

$("#tempForm").submit();

}

}

第五步：

加入验证代码，格式如下：

$(function() {

$("#tempForm").validate({

rules: {

"cost.costMoney": {

required: true,

number: true,

maxlength:18

}

},

messages: {

"cost.costMoney": {

required: "font color='red'成本金额不能为空/font",

number: "font color='red'成本金额必须为数字/font",

maxlength:"font color='red'成本金额长度不能大于

18/font"

}

}

});

});

6

第六步：

打开浏览器查看表单验证效果。

如何用jquery验证文本框只能输入字母数字和下划线

由数字、26个英文字母或者下划线组成的字符串可用jquery正则表达式：

/^\w+$/，验证代码为：

var reg = /^\w+$/;

if(reg.test($("input:text").val()))

// 验证通过

else

// 验证失败

下面给出实例演示：

创建Html元素

div class="box"

span请输入用户名，限定字母、数字或下划线的组合：/spanbr

div class="content"

input type="text"/

/div

input type="button" value="验证"

/div

设置css样式

div.box{width:300px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;height:50px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}

input[type='text']{width:250px;height:40px;padding:0 5px;border:1px solid #6699cc;}

input[type='button']{height:30px;margin:10px;padding:5px 10px;}

编写jquery代码

$(function(){

// 设置属性值

$("input:button").click(function() {

var reg = /^\w+$/;

// 如果验证失败给出警告

if(!reg.test($("input:text").val()))

alert("用户名限定为字母、数字或下划线的组合");

});

})

观察效果

jQuery为什么需要进行表单验证

不是jQuery需要进行表单验证， 是网页在提交数据的时候，为了减轻服务器的活，把能做的都在前端做了。

比如，用户输入一个手机号码，如果该手机号码格式是错的，比如格式是158125238pp

然后前端人员又没有对数据进行验证，然后又提交到服务器那里去，很显然这个手机号是错的，服务器存储这个手机号一点用处也没有、、、

所以需要进行表单验证

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

}

}

如何 用jquery做简单的表单验证

如果是单纯的jQuery的话，那么验证和js的验证是相似的。只不过取得对象的时候用的是jQuery（‘’）。这个方便些。如果用jQuery ui的话 就可以用ui的form插件来验证

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

//表单的ajax提交验证

function validate(formData, jqForm, options)

{

if($("input:checked").length0)

{

return isNull($("#gsbm"),$('#error'),'****')?true:false;

}else{

updateTips($('#error'),'没有正确数据行。');

return false;

}

}

//队返回结果处理

function response(responseText, statusText)

{

if(responseText=='1')

{

updateTips( $('#error'),'录入成功');

setTimeout("window.location.reload()", 2000);

}else

{

updateTips($('#error'), '录入失败，请刷新重试。');

}

return true;

}

$('#MyForm').ajaxForm( {beforeSubmit: validate,success: response} );

这个是无刷新提交。

当前名称：验证jquery,验证失败连接到服务器时出现问题
文章来源：http://ybzwz.com/article/dsddhjd.html