jQuery的validate插件使用整理(第二部分:基础知识)

2019-03-18 23:56|来源: 领悟书生

1. 指定验证规则的方式

1.1. 把验证规则写到字段元素的class属性中

       例:

       用户名:<inputtype="password" name="password" class="required">

       电子邮件:<inputtype="text" name="email" class="required email">

       密码:<inputtype="password" name="password" id="password1"

class="{required:true, minlength: 3}">

       再次输入密码:<inputtype="password" name="password2"

class="{equalTo:'[#password1]'} required">

       以上用了两种方式:

       1,指定多个class名称(验证规则),多个class名称之间用空格隔开,如:class="requiredemail"

       2,使用JSON对象,指定多个属性,如:class="{required:true, minlength: 3}"

          可以为某验证规则指定所用的参数,如minlength规则需要指定最小长度,这里为3。

       3,混合使用,如:class="{equalTo:'[#password1]'}required"

       说明:

       1,如果使用第2种方式(JSON对象),就必须引入:jquery.metadata.js,作用是解析JSON对象。

       2,如果表单字段的name不能重复,则只有最前面的配置起作用。

1.2. 调用validate()方法时指定验证规则

       $(function() {

          $("#testForm").validate({

              rules: {

              loginName:{ required: true, minlength: 2},

              password: { required: true },

              password2: { equalTo: "#password1" }

           }

       });

   });

2. 可以使用哪些验证规则(内置的验证规则)

required:true

必填字段

remote:"/checkName.do"          

使用ajax方式访问”/checkName.do”,通过返回true或false表示输入值通过或未通过验证

email:true

必须输入正确格式的电子邮件

url:true

必须输入正确格式的网址

date:true

必须输入正确格式的日期

dateISO:true

必须输入正确格式的日期(ISO),例如:2010-01-01,2010/01/01 只验证格式,不验证有效性

number:true

必须输入合法的数字(负数,小数)

digits:true

必须输入整数

creditcard:

必须输入合法的信用卡号

equalTo:"expr"

输入值必须和$(“expr”)的值相同,
 expr例子:#fieldId

accept: "gif|png|jpg"

输入拥有合法后缀名的字符串(上传文件的后缀),多个后缀之间用’|’隔开

maxlength:5

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

minlength:3

输入长度最小是3的字符串(汉字算一个字符)

rangelength:[5,10]

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

range:[5,10]

输入值必须介于 5 和 10 之间

max:5

输入值不能大于5

min:10

输入值不能小于10

说明:

1,remote是远程验证。比如注册验证用户名是否已被注册,返回值只能是true(验证成功)或false(验证失败)。在访问指定的url时,会自动把当前字段的值做为参数传递过去(以字段的name值为key,value为参数值)。

2,例如使用remote验证用户名是否存在,当添加一个用户后,在当前窗口中(同一个窗口),再次添加一个同名的用户,validate不能提示该用户已存在,这是因为缓存的原因,jquery仍认为该用户名可用。解决方法是在页面中添加如下代码:
   $().ready(function(){
       $.ajaxSetup ({
               cache: false //关闭ajax相应的缓存
        });
    });

3,某些属性值中的引号不能省略,否则出错。如accept、equalTo等,因为这时他需要的是一个字符串。

3. 有关错误提示消息

3.1. 更改默认的错误提示消息

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.2. 仅对当前表单改变提示消息

   方法一:在class中指定某验证规则的错误消息

       <input type="file" name="parResource"

   class="{
     required: true, accept: 'zip',
     messages: {required:'请选择文件', accept:'请选择正确的文件'}
   }">    (提示:使用时不能换行)

   方法二:在调用validate()方法时指定某验证规则的错误消息

       $(function() {

           $("#myForm").validate({

               messages:{

               username:{required: "请填写用户名" },

               email: { required: '请填写email', email: "请填与正确的email"}

           }

       });

   });

3.3. 设置错误消息的显示样式

   指定label.error的样式就可以了,如下:

   <style type="text/css">

       label.error{

           margin-left: 10px;

           color: red;

       }

   </style>

说明:label.error指class为error的label元素,如:
<label for="username" class="error">


本文链接:jQuery的validate插件使用整理(第二部分:基础知识)

相关问答

更多

正则表达式:如何通过regex和jQuery捕获网址的第二部分(Regex: How to capture second part of the url by regex and jQuery)

您可以使用两位数/国家/地区代码split : var url = 'http://localhost:8800/gb/About.aspx?id=2&vref=3'; var arr = url.split(/\/[a-z]{2}\//); console.log(arr[0]); //=> http://localhost:8800 console.log(arr[1]); //=> About.aspx?id=2&vref=3 RegEx演示 You can use split o ...

用ISO 8601:2004代表第二部分(Representing Fraction of Second with ISO 8601:2004)

ISO 8601:2004没有规定小数部分的位数。 4.2.2.4带小数的表示 互换方根据申请应同意小数部分的位数。 根据需要(格式分别为小时分钟,小时分钟和小时)格式应为[hhmmss,ss],[hhmm,mm]或[hh,hh],小数点后必须填写必要的位数。 小数部分至少应有一位数字。 是的,如果您使用6位数字表示小数部分,则表示是正确的。 1ms -- 001000 10ms -- 010000 100ms -- 100000 1μs -- 000001 ISO 8601:2004 ...

如何访问2d数组的第二部分(How to access second part of 2d array)

没有二维数组的“第一部分”和“第二部分”。 在声明为x[j][i]的数组中有i行和j列。 现在为技术方面: Java没有真正的二维数组; 它有数组数组,因此x[rows][cols]是cols元素的rows数组的数组x (即x[rows]是数组的数组)。 因此,当您执行array1[i] = array2[i] ,您正在复制对第二个数组中列数组的引用。 但是没有办法做镜像 - 你不能复制对行的引用但保留列值,因为行数组是 x 。 如果您正在寻找“深层复制”,可以手动执行以下操作: for (int ...

MATLAB和力学(主要是物理学)[第二部分](MATLAB and mechanics (physics mostly) [part II])

一些要点/建议: 您似乎使用K2a参数化您的Simulink模型(除非我从截图中看不到很好),但它没有在任何地方定义。 您在代码中定义k2a ,但MATLAB区分大小写,因此它与K2a 。 你的Fcn1块没有做任何事情,你可以摆脱它。 除此之外,我并没有看到你所做的事情有什么不妥,我们不知道你的情节应该是什么样的,所以我们不能真正帮助你,而不是我害怕。 编辑 : 我认为这就是你的情节应该是什么样子。 我在Octave中尝试过它,只是使用MATLAB代码和ode求解器(没有Simulink)和log ...

第二部动画(Second animation)

我想你应该用块试试这个...... - (IBAction)tap:(UITapGestureRecognizer *)gesture { CGPoint tapLocation = [gesture locationInView:self.view1]; for (UIView *view in self.view1.subviews) { if (CGRectContainsPoint(view.frame, tapLocation)) { ...

Cmd和感叹号 - 第二部分(Cmd and exclamation marks - Part II)

那是因为在 set "line=%%a" 后启用了延迟扩展: set "line=%%a" @echo on & setlocal ENABLEEXTENSIONS ENABLEDELAYEDEXPANSION set "line=!line:.wav=%NewExtension%!" 如果在分配%%a 之前启用延迟扩展: @echo on & setlocal ENABLEEXTENSIONS ENABLEDELAYEDEXPANSION set "line=%%a" set "line=!l ...

为什么第二部分不会在MJML中显示?(Why won't a second section display in MJML?)

你错过了mj-container标签。 这是有效的代码: <mjml> <mj-body> <mj-container> <mj-section> <mj-column> <mj-text align="center"> This is a header </mj-text> </mj-column> </mj-section> <mj-section> ...

太空后只有第二部分(Grep only second part after space)

由于_被认为是单词char,因此_和1之间没有单词边界。 预期数字的两边都有单词边界。 因此,您需要做的就是使用带有单词边界的模式。 您可以使用w选项作为整个单词匹配,或者在\b或\< / \>之间选择,无论您的grep支持哪个: grep -Ewo '[0-9]+' grep -Eo '\b[0-9]+\b' grep -Eo '\<[0-9]+\>' 请参阅在线演示 。 注意,您也可以使用sed从行中提取第二个非空白块: sed -E 's/^\s*\S+\s+(\S+).*/\1/' 看 ...

如何在Swift 3中访问这些数组的第二部分?(How do I access just the second part of these arrays in Swift 3?)

如果你想要一个包含第二个数字的数组,你可以使用如下的map : sr.map { $0[1] } 或者,因为它们是索引路径,所以这是更简洁的: sr.map { $0.row } If you want an array containing just the second numbers, you can use a map, like this: sr.map { $0[1] } Or, since they are index paths, this is neater: sr.map ...

数据准备第二部分(data preparation part II)

目前尚不清楚你想如何对待K ,但这里有一个选择: dt_new <- dt[, list(A_sum = length(A)), by = list(K, B)] # K B A_sum # 1: A 3 3 # 2: B 1 3 It's not clear how you want to treat K, but here's one option: dt_new <- dt[, list(A_sum = length(A)), by = list(K, B)] # ...