jquery验证

最新推荐文章于 2023-03-21 13:46:58 发布

转载最新推荐文章于 2023-03-21 13:46:58 发布 · 4.8k 阅读

本文详细介绍了jQuery验证控件的使用方法，包括导入库、默认校验规则、自定义提示信息以及如何将校验规则应用到表单控件中。通过实例演示，帮助开发者轻松实现表单验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

id="BAIDU_DUP_fp_iframe" src="//pos.baidu.com/wh/o.htm?ltr=" style="width: 0px; height: 0px; display: none; visibility: hidden;">

【免费公开课】Gulp前端自动化教程走进VR开发世界——我们离开发一款VR大作还有多远？优快云发福利啦！C币、京东卡、现金任你选

jQuery验证控件jquery.validate.js使用说明+中文API（1）

2014-02-22 15:44 282人阅读评论(0) 收藏举报

分类：

jQuery（10）

作者同类文章 X

目录(?)[+]

jQuery校验

官网地址： http://bassistance.de/jquery-plugins/jquery-plugin-validation

一导入js库

[html] view plain copy

print ?

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

<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                  必须输入正确格式的日期日期校验ie6出错，慎用
(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

三、默认的提示

[javascript] view plain copy

print ?

messages: {
required:"This field is required.",
remote:"Please fix this field.",
email:"Please enter a valid email address.",
url: "Pleaseenter 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}.")
},

messages: {
    required:"This field is required.",
    remote:"Please fix this field.",
    email:"Please enter a valid email address.",
    url: "Pleaseenter 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代码中加入：

[javascript] view plain copy

print ?

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} 的值")
});

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} 的值")
});

推荐做法，将此文件放入messages_cn.js中，在页面中引入

[html] view plain copy

print ?

<script src="../js/messages_cn.js"type="text/javascript"></script>

<script src="../js/messages_cn.js"type="text/javascript"></script>

四、使用方式

1.将校验规则写到控件中

[html] view plain copy

print ?

<scriptsrcscriptsrc="../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="">
<p>
<labelforlabelfor="firstname">Firstname</label>
<input id="firstname" name="firstname"class="required" />
</p>
<p>
<labelforlabelfor="email">E-Mail</label>
<inputidinputid="email" name="email" class="required email"/>
</p>
<p>
<labelforlabelfor="password">Password</label>
<inputidinputid="password" name="password" type="password"class="{required:true,minlength:5}" />
</p>
<p>
<labelforlabelfor="confirm_password">确认密码</label>
<inputidinputid="confirm_password" name="confirm_password" type="password"class="{required:true,minlength:5,equalTo:'#password'}"/>
</p>
<p>
<input class="submit" type="submit"value="Submit"/>
</p>
</form>

<scriptsrc="../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">

使用class="{}"的方式，必须引入包：jQuery.metadata.js
可以使用如下的方法，修改提示内容：
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
在使用equalTo关键字时，后面的内容必须加上引号，如下代码：
class="{required:true,minlength:5,equalTo:'#password'}"
 
 
2.将校验规则写到js代码中

       
        
         
          [html] 
          view plain
           copy
          
           
          
           print
          ?
          
          
         
        
        $().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="">  
   <p>  
       <labelforlabelfor="firstname">Firstname</label>  
       <input id="firstname" name="firstname"/>  
   </p>  
 <p>  
  <labelforlabelfor="email">E-Mail</label>  
  <inputidinputid="email" name="email" />  
 </p>  
 <p>  
  <labelforlabelfor="password">Password</label>  
  <inputidinputid="password" name="password" type="password"/>  
 </p>  
 <p>  
  <labelforlabelfor="confirm_password">确认密码</label>  
  <inputidinputid="confirm_password" name="confirm_password" type="password"/>  
 </p>  
   <p>  
       <input class="submit" type="submit"value="Submit"/>  
   </p>  
</form>  
       
$().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="">
   <p>
       <labelfor="firstname">Firstname</label>
       <input id="firstname" name="firstname"/>
   </p>
 <p>
  <labelfor="email">E-Mail</label>
  <inputid="email" name="email" />
 </p>
 <p>
  <labelfor="password">Password</label>
  <inputid="password" name="password" type="password"/>
 </p>
 <p>
  <labelfor="confirm_password">确认密码</label>
  <inputid="confirm_password" name="confirm_password" type="password"/>
 </p>
   <p>
       <input class="submit" type="submit"value="Submit"/>
   </p>
</form>

required:true必须有值
required:"#aa:checked"表达式的值为真，则需要验证
required:function(){}返回为真，表时需要验证
后边两种常用于，表单中需要同时填或不填的元素。

原文：http://blog.sina.com.cn/s/blog_608475eb0100h3h1.html

顶

踩

我的同类文章

jQuery（10）

•jQuery ajax Load关闭缓存的方法2014-04-18阅读294
•jQuery常用的元素查找方法总结2014-03-01阅读420
•jQuery之ready2014-03-01阅读259
•浅析jQuery删除节点的三个方法2013-12-21阅读253
•jQuery中子元素和后代元素的区别。2013-12-21阅读361

•JQuery常用的方法2014-03-01阅读290
•jQuery之内置遍历函数2014-03-01阅读270
•jQuery验证控件jquery.validate.js使用说明+中文API（2）2014-02-22阅读282
•jQuery 如何通过 ID 选择器获取动态ID2013-12-21阅读5192
•AJAX ASP.NET ashx用法2013-12-16阅读1851

参考知识库

jQuery知识库

448关注|232收录

JavaScript知识库

1654关注|517收录

AngularJS知识库

597关注|262收录

猜你在找

ArcGIS for JavaScript

快速掌握JQuery视频教程

Spread for WinForms 电子表格控件基础视频教程

零基础学HTML 5实战开发(第一季)

从此不求人:自主研发一套PHP前端开发框架

jQuery验证控件jqueryvalidatejs使用说明+中文API

转jQuery验证控件jqueryvalidatejs使用说明+中文API

jQuery验证控件jqueryvalidatejs使用说明+中文API

width="728" height="90" align="center,center" id="iframeu1607657_0" src="//pos.baidu.com/mckm?sz=728x90&rdid=1607657&dc=2&di=u1607657&dri=0&dis=0&dai=2&ps=5925x241&coa=at%3D3%26rsi0%3D728%26rsi1%3D90%26pat%3D6%26tn%3DbaiduCustNativeAD%26rss1%3D%2523FFFFFF%26conBW%3D1%26adp%3D1%26ptt%3D0%26titFF%3D%2525E5%2525BE%2525AE%2525E8%2525BD%2525AF%2525E9%25259B%252585%2525E9%2525BB%252591%26titFS%3D%26rss2%3D%2523000000%26titSU%3D0%26ptbg%3D90%26piw%3D0%26pih%3D0%26ptp%3D0&dcb=BAIDU_SSP_define&dtm=BAIDU_DUP_SETJSONADSLOT&dvi=0.0&dci=-1&dpt=none&tsr=0&tpr=1464158567661&ti=jQuery%E9%AA%8C%E8%AF%81%E6%8E%A7%E4%BB%B6jquery.validate.js%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E%2B%E4%B8%AD%E6%96%87API%EF%BC%881%EF%BC%89%20-%20yanzhibo%E7%9A%84%E4%B8%93%E6%A0%8F%20-%20%E5%8D%9A%E5%AE%A2&ari=1&dbv=2&drs=3&pcs=1021x638&pss=1021x6523&cfv=11&cpl=17&chi=45&cce=true&cec=UTF-8&tlm=1464129767&ltu=http%3A%2F%2Fblog.youkuaiyun.com%2Fyanzhibo%2Farticle%2Fdetails%2F19687163&ecd=1&psr=1366x768&par=1366x728&pis=-1x-1&ccd=24&cja=true&cmi=23&col=zh-CN&cdo=-1&tcn=1464158568&qn=b01f6782e423e8f3&tt=1464158567635.33.197.204" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" vspace="0" hspace="0" style="margin: 0px; border: 0px currentColor; border-image: none; vertical-align: bottom;" allowtransparency="true">

查看评论

暂无评论

您还没有登录,请 [登录]或 [注册]

* 以上用户言论只代表其个人观点，不代表优快云网站的观点或立场

个人资料

whyabc
- 访问：342929次
- 积分：4788
- 等级：
  
  积分：4788
- 排名：第3708名
- 原创：111篇
- 转载：194篇
- 译文：7篇
- 评论：42条

文章搜索

文章分类

ASP.NET(65)
C#(44)
PowerBuilder(2)
ProfUIS(4)
sip(1)
SqlServer(11)
C & C++(40)
WinForm(10)
WM(18)
系统(4)
SQLite(1)
Android(14)
win7(7)
MySQL(1)
点九(2)
Java(1)
vb(9)
多线程(6)
硬件(1)
jQuery(11)
LINQ to Entities(4)
Lambda(3)
css(18)
Memcached(1)
正则(2)
IIS(13)
安全(31)
html(13)
AJAX(5)
JavaScript(7)
生活(1)
Swift(1)

文章存档

- 2016年05月(1)
- 2014年12月(1)
- 2014年11月(5)
- 2014年08月(12)
- 2014年07月(3)
- 2014年06月(5)
- 2014年05月(1)
- 2014年04月(6)
- 2014年03月(11)
- 2014年02月(45)
- 2014年01月(72)
- 2013年12月(7)
- 2013年11月(6)
- 2013年10月(3)
- 2013年09月(3)
- 2013年08月(1)
- 2013年07月(1)
- 2013年06月(2)
- 2013年05月(12)
- 2013年04月(10)
- 2013年03月(8)
- 2013年01月(3)
- 2012年12月(2)
- 2012年11月(2)
- 2012年08月(1)
- 2012年07月(14)
- 2012年05月(1)
- 2011年11月(1)
- 2011年09月(2)
- 2011年08月(3)
- 2011年07月(3)
- 2011年05月(2)
- 2011年04月(1)
- 2011年03月(2)
- 2010年11月(1)
- 2010年10月(1)
- 2010年09月(2)
- 2010年08月(1)
- 2010年07月(8)
- 2010年06月(8)
- 2010年04月(2)
- 2010年03月(15)
- 2010年01月(1)
- 2009年12月(2)
- 2009年11月(1)
- 2009年10月(1)
- 2009年09月(9)
- 2009年08月(7)
- 2009年06月(1)
- 展开

阅读排行

IIS7设置默认页(16205)
eclipse里配置Android ndk环境，用eclipse编译.so文件(12784)
Sql2008 配置远程连接及客户端连接不上的解决方法(10605)
win7 打开80端口(10131)
android 一行两个按钮居中布局(8530)
解决检索COM类工厂中CLSID为{ }组件失败(7217)
Javascript Base64编码与解码(7164)
hmac_sha1.c源码, C语言中的HMAC_SHA1加密方法(6917)
DIV Display属性和Visibility属性(5738)
一句话说明白lamda表达式(5663)

评论排行

推荐文章

最新评论

c#万能视频播放器
qu2011:这个万能视频播放器能播放.m3u8格式的视频吗？
Android JavaMail中的553 Mail from must equal authorized user
feng891025:毛呀，解决个毛呀
C++ HMAC_SHA1加密算法源码
track6688:如果用于Linux的话，要修改一些东西。
android javamail发送邮件
宏雷92:按照你说的 163邮箱居然成功了
android javamail发送邮件
宏雷92:如果是 QQ 邮箱呢？
eclipse里配置Android ndk环境，用eclipse编译.so文件
清风吹来:不错
asp.net程序在IIS7下“请求在此上下文中不可用”错误
qiuxue126com:多谢，学习啦！
SQL Server 2008 中使用SQLDMO 备份数据还原数据等
cainiao_w:谢谢。
有关无法启动程序 “%CSIDL_PROGRAM_FILES%/.../....exe" 的问题
猪大:我也出现过这样的问题，但后来解决了：菜单栏的项目》设备》取消“部署.NET......” 前面的勾...
asp.net防类似DDOS攻击(CC攻击)代码
hongxuhuan:不错，指的参考学习

提问

您的问题将会被发布在“技术问答”频道 ×

该问题已存在，请勿重复提问

插入链接

本地上传网络图片

src="http://ask.youkuaiyun.com/upload.html">

插入图片

0 0 0:0

推荐标签：

我要悬赏币

取消发布

可能存在类似的问题：

我想提一个新问题

jquery验证

社区

服务

俱乐部

yanzhibo的专栏

jQuery验证控件jquery.validate.js使用说明+中文API（1）

jQuery校验

一导入js库

二、默认校验规则

三、默认的提示

四、使用方式

1.将校验规则写到控件中

2.将校验规则写到js代码中

我的同类文章

参考知识库

jQuery知识库

JavaScript知识库

AngularJS知识库

提问

jquery验证

社区

服务

俱乐部

yanzhibo的专栏

jQuery验证控件jquery.validate.js使用说明+中文API（1）

jQuery校验

一导入js库

二、默认校验规则

三、默认的提示

四、使用方式

1.将校验规则写到控件中

2.将校验规则写到js代码中

我的同类文章

参考知识库

jQuery知识库

JavaScript知识库

AngularJS知识库

核心技术类目

提问