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}.")
},

深远学习jQuery Validate表单验证,jqueryvalidate

本文实例介绍了jQuery
Validate表单验证,重借使接纳jquery.metadata.js将校验准则直接写在class属性里面并定义错误音信的唤起,分享给大家供我们参谋,具体内容如下

1、增多二个其他一个插件jquery.metadata.js 并把校验准绳写在控件里面。
2、要求改写触发校验的法子。

$("#commentForm").validate({meta: "validate"});

3、详细代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});

 });
 </script>

</head>
<body>


 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true}}" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true}}" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

私下认可校验准绳:

  • (1)required:true              
    必输字段
  • (2)remote:”check.php”         
    使用ajax方法调用check.php验证输入值
  • (3)email:true                 
    必须输入正确格式的电子邮件
  • (4)url:true                   
    必须输入正确格式的网站
  • (5)date:true                  
    必须输入精确格式的日期 日期校验ie6出错,慎用
  • (6)dateISO:true               
    必须输入正确格式的日期(ISO),比方:二〇一〇-06-23,1998/055%2
    只验证格式,不表达有效性
  • (7)number:true                
    必须输入合法的数字(负数,小数)
  • (8)digits:true                
    必须输入整数
  • (9)creditcard:                
    必须输入合法的信用卡号
  • (10)equalTo:”#田野同志”          
    输入值必须和#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

暗中同意提醒:

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}.")
},

4、效果图如下:

图片 1

5、注意:
行使 class=”{}” 的方式,必须引入包:jquery.metadata.js。
能够使用如下的办法,修改提示内容:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在选择 equalTo 关键字时,后边的剧情必须抬高引号,代码如下所示:

class="{required:true,minlength:5,equalTo:'#password'}"

6、直接在class属性里面定义错误消息的唤醒。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中(2)</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<script src="lib/jquery.metadata.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

 <script type="text/javascript">
 $(document).ready(function(){

   $("#commentForm").validate({meta: "validate"});

 });
 </script>

</head>
<body>


 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中(2)</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25"  class="{validate:{required:true, email:true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" value=""  class="{validate:{url:true, messages:{url:'请检查网址的格式'}}}" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true, messages:{required:'请输入您的评论'}}}" ></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

7、效果如下:

 图片 2

如上就是本文的全体内容,希望对我们学习jQuery
Validate表单验证有所扶助,方今更新了广大有关jQuery
Validate表单验证的小说,咱们能够组成实行学习。

您大概感兴趣的篇章:

  • jquery.validate使用计策 第三部
  • jquery validate使用计谋 第四步
  • jquery.validate使用计策 第五步 正则印证
  • jQuery validate 中文API 附validate.js中文api手册
  • JQuery扩张插件Validate—6 radio、checkbox、select的表明
  • jQuery EasyUI API 国语文档 – ValidateBox验证框
  • jQuery.Validate验证库的使用介绍
  • Jquery Validate 正则表明式实用验证代码大全
  • jquery validate增添自定义表明准则(验证邮箱 邮编)
  • 据他们说Bootstrap+jQuery.validate完毕Form表单验证

Validate表单验证插件
增加class属性格局的校验,jqueryvalidate 本文实例介绍了jQuery Validate
表单验证插件,增加class属性格局的校验,分享…

class=”{required:true,minlength:5,equalTo:’#password’}”

$("#commentForm").validate({meta: "validate"});

您或者感兴趣的篇章:

  • jquery validate.js表单验证的大旨用法入门
  • jQuery.Validate 使用笔记(jQuery Validation模范 )
  • jquery.validate使用计策 第一部
  • jquery validate使用战术 第四步
  • jQuery validate 中文API 附validate.js中文api手册
  • jQuery EasyUI API 汉语文书档案 – ValidateBox验证框
  • jQuery.Validate验证库的利用介绍
  • 据书上说Bootstrap+jQuery.validate完成Form表单验证

Validate表单验证,jqueryvalidate
本文实例介绍了jQuery
Validate表单验证,首要是接纳jquery.metadata.js将官和校官验准绳直接写在class属性里…

jQuery Validate表单验证插件 增多class属性情势的校验,jqueryvalidate

正文实例介绍了jQuery Validate
表单验证插件,增加class属性方式的校验,分享给大家供我们仿效,具体内容如下
作用如下:

图片 3

一、jQuery表单验证插件,增加class属性方式的校验

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery表单验证插件----添加class属性形式的校验</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
 <script type="text/javascript">
 $(document).ready(function(){
  $("#commentForm").validate();
 });
 </script>

</head>
<body>


 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----添加class属性形式的校验</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25" class="required email" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" class="url" value="" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
</body>
</html>

二、暗许法规 私下认可校验法则:

  • (1)required:true              
    必输字段
  • (2)remote:”check.php”         
    使用ajax方法调用check.php验证输入值
  • (3)email:true                 
    必须输入精确格式的电子邮件
  • (4)url:true                   
    必须输入准确格式的网站
  • (5)date:true                  
    必须输入精确格式的日子 日期校验ie6出错,慎用
  • (6)dateISO:true               
    必须输入正确格式的日期(ISO),比如:2010-06-23,一九九七/0四分之二2
    只验证格式,不表达有效性
  • (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

暗中同意提醒:

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}.")
},

上述正是本文的全部内容,希望对大家的上学抱有协理。

推荐介绍做法,将此文件放入messages_cn.js中,在页面中引入 
[codept src=”../js/messages_cn.js”
type=”text/javascript”></script> [/code
四、使用方式  1.将官和校官验准绳写到控件中 

5、注意:
利用 class=”{}” 的方法,必须引入包:jquery.metadata.js。
能够动用如下的点子,修改提示内容:

  • (1)required:true                必输字段 
  • (2)remote:”check.php”     使用ajax方法调用check.php验证输入值 
  • (3)email:true                    必须输入准确格式的电子邮件 
  • (4)url:true                        必须输入正确格式的网站 
  • (5)date:true                     必须输入正确格式的日期 
  • (6)dateISO:true               
    必须输入正确格式的日期(ISO),譬喻:贰零零玖-06-23,1999/052%2
    只验证格式,不表明有效性 
  • (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  
class="{required:true,minlength:5,equalTo:'#password'}"

这么能够选取validate=”{required:true}”的措施,恐怕class=”required”,但class=”{required:true,minlength:5}”将不起成效  
2.将官和校官验法则写到代码中   

3、详细代码如下:

一、用前必备 
官方网址:  API:  

7、效果如下:

您大概感兴趣的小说:

  • jQuery插件Validation快捷产生表单验证的法子
  • jQuery Validation
    Plugin验证插件手动验证
  • jquery插件validation实现认证身份ID号等
  • jquery
    validation验证居民身份证号,护照,电话号码,email(实例代码)
  • ASP.NET中实现jQuery
    Validation-Engine的Ajax验证
  • ASP.NET中实现jQuery
    Validation-Engine的Ajax验证达成代码
  • 修改jQuery
    Validation里默认的认证办法
  • jQuery.Validate 使用笔记(jQuery Validation表率)
  • jQuery
    表单验证插件formValidation完成天性化错误提醒
  • jQuery插件之validation插件

默许提醒:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>jQuery PlugIn - 表单验证插件实例 Validate </title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="jquery.validate.min.js"></script>
 <script type="text/javascript" src="messages_cn.js"></script>
 <style type="text/css">
 * { font-family: Verdana; font-size:13px; }
 input[type='text']{width:200px;}
 textarea{width:155px;}
 .title{float:left;width:10em}
 em.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
 .field_notice{display:none;}
 .checking{display:none;}
 </style>
 <script>
 $(document).ready(function(){
  $("#commentForm").validate({
   errorPlacement: function(error, element){
    var error_td = element.next('em');
    error_td.find('.field_notice').hide();
    error_td.append(error);
   },
   success: function(label){
    label.addClass('validate_right').text('OK!');
   },
   onkeyup: false,
   rules: {
    name: {
     required:true,
     minlength:3,
     maxlength:40,
     remote:{
      url :'index.php?ajax=1',
      type:'get',
      data:{
       name : function(){
        return $('#name').val();
       }
      },
      beforeSend:function(){
       var _checking = $('#checking');
       _checking.prev('.field_notice').hide();
       _checking.next('label').hide();
       $(_checking).show();
      },
      complete :function(){
       $('#checking').hide();
      }
     }
    },
    email: {required: true, email: true },
    url:{required:true,url:true},
    text:"required"
   },
   messages: {
    name: {required:"需要输入名称", minlength:"名称长度在3-40个字符之间", maxlength:"名称长度在3-40个字符之间",remote:"用户名已存在"},
    email: {required:"需要输入电子邮箱", email:"电子邮箱格式不正确"},
    url: {required:"需要输入URL地址", url:"URL地址格式不正确"},
    text:"需要输入文本内容"
   },
  });
 });
 </script>
</head>
<body>
 <form id="commentForm" method="get" action="" >
 <fieldset>
 <legend>表单验证</legend>
 <p><label class="title" >Name</label><input id="name" name="name"/>
  <em><label class="field_notice"></label><label id="checking" class="checking">检查中...</label></em>
 </p>
 <p><label class="title" >E-Mail</label><input name="email"/>
  <em><label class="field_notice"></label></em>
 </p>
 <p><label class="title" >URL</label><input name="url"/>
  <em><label class="field_notice"></label></em>
 </p>
 <p><label class="title" >text</label><textarea name="text" cols="22"></textarea>
  <em><label class="field_notice"></label></em>
 </p>
 <p><input class="submit" type="submit" value="提交"/></p>
 </fieldset>
 </form>
</body>
</html>