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. Oracle index unusable和invisible的差别

    摘录自11g的官方文档:      UNUSABLE Specify UNUSABLE to mark the index or index partition(s) or index subpart ...

  2. Python全栈

    Python基础 Python基础01 Hello World! Python基础02 基本数据类型 Python基础03 序列 Python基础04 运算 Python基础05 缩进和选择 Pyth ...

  3. UTF-8 的中文檔案名上傳問題

    在上传文件后,一般都会用 move_uploaded_file() 进行文件移动改名.但是 move_uploaded_file() 并不支持 UTF-8 编码,如果含有,那么函数就会执行失败,但是这 ...

  4. 记录一次node中台转发表单上传文件到后台过程

    首发掘金 记录一次node中台转发表单上传文件到后台过程 本篇跟掘金为同一个作者leung   公司几个项目都是三层架构模式即前台,中台(中间层),后台.前台微信端公众号使用vue框架,后台管理前端使 ...

  5. MySQL-数据表锁定

    MySQL允许客户端会话明确获取表锁,以防止其他会话在特定时间段内访问表.客户端会话只能为自己获取或释放表锁.它不能获取或释放其他会话的表锁. 创建一个数据表: CREATE DATABASE IF ...

  6. javaSE基础（三）

    泛型类:像ArrayList这样的特殊类,他们允许通过类型参数来指明使用的数据类型. 报装类:一种用于将基本类型的数据"封装"成对象的类. 装箱:将 基本类型的数据自动转换为对应类 ...

  7. lucene源码分析的一些资料

    针对lucene6.1较新的分析:http://46aae4d1e2371e4aa769798941cef698.devproxy.yunshipei.com/conansonic/article/d ...

  8. android 使用AlarmManager定时启动service

    private static AlarmManager am; private static PendingIntent pendingIntent; /** * 使用 AlarmManager 来 ...

  9. Windows Java环境变量配置

    安装步骤略过... 环境变量配置 新建环境变量: JAVA_HOME C:\Program Files\Java\jdk1.6 将路径替换为自己的安装路径.    新建环境变量: classpath ...

  10. HTML5来了，7个混合式移动开发框架

    在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一些CSS和JavaScript就够了.如果你总听别 ...