parsley.js添加表单验证功能，直接在html元素中添加对应属性；

Name API Description
Required #2.0
必填
required HTML5
data-parsley-required  
data-parsley-required="true"  
data-parsley-required="false"  
验证元素是否必填。如果设置 data-parsley-required="false",，属性失效，元素将不再必填；
Email #2.0
邮箱
type="email" HTML5
data-parsley-type="email"  
验证元素的值必须是一个邮箱地址；
Number #2.0
数值		 data-parsley-type="number" 依据给定的步长、初始值、最小值等设置数值的验证规则。
parsley为data-parsley-type="number"（验证数值类型）设置步长，步长为html5的默认步长1。
警告!HTML5 type="number" 是非常规的。 默认步长为1几乎是无用的。此外浏览器也支持type="number" ，当输入内容为"",不会报错；所以data-parsley-type="number"为避免输入的值为""需要设置必填。可为任何数。
Integer #2.0
整数
type="number" HTML5
data-parsley-type="integer"  
type="number" 的支持并不好，IE11都不支持此type="number"，Chrome则是键盘输入值无法键入。data-parsley-type="integer" 只允许输入整数。  
Digits #2.0
自然数		 data-parsley-type="digits" 注意：i18n的中文翻译为了“号码”，实际正则/^\d+$/为只允许输入自然数。
Alphanum #2.0
正整数和字母		 data-parsley-type="alphanum" 只允许输入字母或数字，根据正则/^\w+$/i不允许输入小数或者正负符号作为内容的一部分。
Url #2.0
type="url" HTML5
data-parsley-type="url"  
输入内容必须为一个url；IE9-不支持type="url"；
IE8-不支持data-parsley-type="url"；
Minlength #2.0
字符串最小长度
minlength="6" HTML5
data-parsley-minlength="6"  
输入内容的最小字符长度。
Maxlength #2.0
字符串最大长度
maxlength="6" HTML5
data-parsley-maxlength="6"  
输入内容的最大字符长度。
Length #2.0
字符串长度范围		 data-parsley-length="[6, 10]" 输入内容的字符长度范围；也可用minlength和maxlength替代此属性的功能。
Min #2.0
数值最小值
min="6" HTML5
data-parsley-min="6"  
验证数值最小值
Max #2.0
数值最大值
max="10" HTML5
data-parsley-max="6"  
验证数值最大值
Range #2.0
数值范围
type="range" HTML5
data-parsley-range="[6, 10]"  
验证数值范围
Pattern #2.0
正则表达式验证格式
pattern="\d+" HTML5
data-parsley-pattern="\d+"  
在属性中验证正则表达式格式
MinCheck #2.0
最小选中几项复选框		 data-parsley-mincheck="3" 复选框最少需要选中几项，如果不设置必填，未选中任何项的情况下不做验证。属性随便设置在该组复选中的任何一项。
MaxCheck #2.0
最多选中几项复选框		 data-parsley-maxcheck="3" 复选框最多选中几项，如果要求至少选中一项则须设置必填。设置最多选中的项数请添加属性到该组复选中的任意一项。
Check #2.0
选中复选的项数范围		 data-parsley-check="[1, 3]" 该属性设置选中项数范围。要求至少选中一项需要设置必填；否则不选中任何项也不验证该规则。
Equalto #2.0 data-parsley-equalto="#anotherfield" 验证两个输入框内容输入是否一直。值可根据被验证输入框的选择器来定位。

parsley.js验证固定长度没有对应属性，data-parsley-length="[2, 2]"提示：字符长度应该在 2 到 2 之间；data-parsley-pattern="\d{2}"提示：格式不正确。
提示的信息都不能表达字符串长度为定长2。

示例见下方：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>parsley-属性测试</title>

</head>

<body>

  <form id="form" action="index.html" method="post" data-parsley-validate>

    <div>

      <label for="userName">姓名：</label>

	  <input type="text" id="userName" name="userName" data-parsley-required="true"/>

	</div>

	<div>

      <label for="email">邮箱：</label>

	  <input type="text" id="email" name="email" data-parsley-required="true" data-parsley-type="email"/>

	</div>

	<div>

      <label for="age">年龄：</label>

	  <input type="text" id="age" name="age" data-parsley-type="integer" />

	</div>

	<div>

      <label for="age1">测试trigger：</label>

	  <input type="text" id="age1" name="age1" data-parsley-type="integer" data-parsley-trigger="change"/>

	</div>

	<div>

      <label for="salary">薪资：</label>

	  <input type="text" id="salary" name="salary" data-parsley-type="digits"/>

	</div>

	<div>

      <label for="deposit">存款：</label>

	  <input type="text" id="deposit" name="deposit" data-parsley-type="number"/>

	</div>

	<div>

      <label for="extractedCode">提取码</label>

	  <input type="text" id="extractedCode" name="extractedCode" data-parsley-type="alphanum"/>

	</div>

	<div>

      <label for="personWebSite">个人网站：</label>

	  <input type="text" id="personWebSite" name="personWebSite" data-parsley-type="url"/>

	</div>

	<div>

      <label for="hobby">特长：</label>

	  <input type="text" id="hobby" name="hobby" data-parsley-length="[6, 10]"/>

	</div>

	<div>

      <label for="minValue">最小值：</label>

	  <input type="text" id="minValue" name="minValue" data-parsley-min="5"/>

	</div>

	<div>

      <label for="maxValue">最大值：</label>

	  <input type="text" id="maxValue" name="maxValue" data-parsley-max="6"/>

	</div>

	<div>

      <label for="rangeValue">数值范围：</label>

	  <input type="text" id="rangeValue" name="rangeValue" data-parsley-range="[6, 10]"/>

	</div>

	<div>

      <label for="regularExpression">正则表达式：</label>

	  <input type="text" id="regularExpression" name="regularExpression" data-parsley-pattern="\d{2}"/>

	</div>

	<div>

      <label>最少选中几项复选：</label>

	  <input type="checkbox" name="xCheckbox" data-parsley-required="true"/>

	  <input type="checkbox" name="xCheckbox" data-parsley-mincheck="2"/>

	  <input type="checkbox" name="xCheckbox"/>

	</div>

	<div>

      <label>最多选中几项复选：</label>

	  <input type="checkbox" name="yCheckbox" data-parsley-required="true"/>

	  <input type="checkbox" name="yCheckbox" data-parsley-maxcheck="2"/>

	  <input type="checkbox" name="yCheckbox"/>

	</div>

	<div>

      <label>选中几项复选（范围）：</label>

	  <input type="checkbox" name="zCheckbox" data-parsley-required="true"/>

	  <input type="checkbox" name="zCheckbox" data-parsley-check="[1,2]"/>

	  <input type="checkbox" name="zCheckbox"/>

	</div>

	<div>

      <label>密码：</label>

	  <input type="password" id="password1"/>

	  <input type="password" data-parsley-equalto="#password1"/>

	</div>

	<div>

	  <input type="submit" value="提交"/>

	</div>

  </form>

  <script src="../jquery-1.x.min.js"></script><!-- 依赖的jquery版本必须>=1.8 -->

  <script src="parsley.min.js"></script>

  <script src="i18n/zh_cn.js"></script><!-- 本地化提示信息 -->

  <script>

  $(function(){

    //$('#form').parsley();//调用parsley表单验证插件(提交时才会验证 是否必填和输入格式)

	$('#form').parsley().validate();//调用parsley表单验证插件(页面加载时就验证 是否必填和输入格式)

  });

  </script>

<body>

</html>

1.对于输入框的已提示“必填”、“格式验证”信息，则输入内容切换会立即验证格式和是否必填；

2.parsley()和parsley().validate()

$('#form').parsley();在提交时出现提示信息，之后修改内容就会立即验证。

如果希望加载页面时就提示必填信息，请将$('#form').parsley();改为$('#form').parsley().validate(); 且parsley().validate()会对页面第一个输入框聚焦。

3.data-parsley-trigger="change"改变值后立即验证（第一次输入值change事件后才验证，之后则是输入即验证）。

须注意$('#form').parsley().validate();在加载页面时对未设置必填的项，输入内容也不会及时出现格式错误的提示（不设置必填，加载页面时没提示信息），在提交一次后才触发了提示信息，之后修改输入值才能每次提示错误信息。 针对这种情况可同时添加data-parsley-trigger="change"；

parsley之验证属性设置的更多相关文章

  1. mvc中动态给一个Model类的属性设置验证

    原文:mvc中动态给一个Model类的属性设置验证 在mvc中有自带的验证机制,比如如果某个字段的类型是数字或者日期,那么用户在输入汉字或者英文字符时,那么编译器会自动验证并提示用户格式不正确,不过这 ...

  2. DEV控件：gridControl常用属性设置（转载）

    特别长,先撸下来再说 1.隐藏最上面的GroupPanel  gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值  sValue=T ...

  3. DEV控件：gridControl常用属性设置

    1.隐藏最上面的GroupPanel  gridView1.OptionsView.ShowGroupPanel=false; 2.得到当前选定记录某字段的值  sValue=Table.Rows[g ...

  4. DEV控件GridControl常用属性设置

    1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView.Ad ...

  5. .NET开源工作流RoadFlow-表单设计-新建表单（属性设置）

    点击表单设计工具栏上的 新建表单 按钮会弹出新表单属性设置框: 表单名称:新表单表名称. 数据连接:表单对应的数据库连接(此连接在 系统管理-->数据库连接 中维护). 数据表:表单对应的数据库 ...

  6. DEV控件GridControl常用属性设置（转）

      1. 如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 2. 如何新增一条记录 (1).gridView. ...

  7. Dev属性设置

    DisplayFormat 设置显示格式如:{0:P}表示显示为百分号模式.如数据源中为0.5.表示出来为50% 2.GridContro总合计及分组合计: 常规总合计直接RunDesigner-Gr ...

  8. ASP.NET Core中使用自定义验证属性控制访问权限

    在应用中,有时我们需要对访问的客户端进行有效性验证,只有提供有效凭证(AccessToken)的终端应用能访问我们的受控站点(如WebAPI站点),此时我们可以通过验证属性的方法来解决. 一.publ ...

  9. cookie的secure、httponly属性设置

    cookie的secure.httponly属性设置 转载自:http://www.cnblogs.com/alanzyy/archive/2011/10/14/2212484.html 一.属性说明 ...

随机推荐

  1. C++ auto 与 register、static keyword 浅析

    [register/auto的比較分析] #include <iostream> using namespace std; int main(){ int i,sum=0; for(i=0 ...

  2. [Android Studio] 取消引用库打包出现异常-- provided dependencies can only be jars

    Warning: Project App: provided dependencies can only be jars. com.android.support:appcompat-v7:22.2. ...

  3. HDU3367 Pseudoforest 【并查集】+【贪心】

    Pseudoforest Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) To ...

  4. AVD那些事儿

    启动了AVD却说找不到AVD 错误提示: No active compatible AVD's or devices found. Relaunch this configuration after ...

  5. 利用函数计算构建微信小程序的Server端

    10分钟上线 - 利用函数计算构建微信小程序的Server端-博客-云栖社区-阿里云 https://yq.aliyun.com/articles/435430 函数计算  读写 oss import ...

  6. luogu2827 蚯蚓

    题目大意 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」= [3.9」=3. 蛐蛐国最近蚯蚓成灾了!隔壁跳蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神刀手来帮他们消灭蚯蚓 ...

  7. win下IE设置

    当win7系统时需要升级IE为11版本,需要先安装sp1版本补丁,再装IE11,若还是装不了,可借助第三方平台(电脑管家等)升级安装.或 更新系统再安装IE11 https://jingyan.bai ...

  8. 美国诚实签经验——我们准备了XX万的存款，这足以应付我预算表中涉及的所有开支，如果有意外情况我们的资金不足以应付，我们双方的父母也会支援我们，绝对不会占用美国的任何福利

    闲话少絮,直接分享本人诚实签的经验,希望对有此打算的朋友有帮助! 个人经验有限,经历仅供参考~~ 第一步:决定赴美生子. 第二步:选择诚实签. 第三步:填写DS160表格(网址https://ceac ...

  9. bzoj 1090 字符串折叠

    题目大意: 折叠的定义如下: 1. 一个字符串可以看成它自身的折叠.2. X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S)=SSSS…S(X个S). 3. 如果A=A’, B=B’, ...

  10. 洛谷 P1314 聪明的质监员 —— 二分

    题目:https://www.luogu.org/problemnew/show/P1314 显然就是二分那个标准: 当然不能每个区间从头到尾算答案,所以要先算出每个位置被算了几次: 不知为何自己第一 ...