parsley之验证属性设置
来源:互联网 发布:方正字库mac版 编辑:程序博客网 时间:2024/06/05 12:57
parsley.js添加表单验证功能,直接在html元素中添加对应属性;
Name API Description
必填
required
HTML5data-parsley-required
data-parsley-required="true"
data-parsley-required="false"
验证元素是否必填。如果设置 data-parsley-required="false"
,,属性失效,元素将不再必填;Email #2.0邮箱
type="email"
HTML5data-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"
HTML5data-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.0type="url"
HTML5data-parsley-type="url"
输入内容必须为一个url;IE9-不支持type="url";IE8-不支持data-parsley-type="url";Minlength #2.0
字符串最小长度
minlength="6"
HTML5data-parsley-minlength="6"
输入内容的最小字符长度。Maxlength #2.0字符串最大长度
maxlength="6"
HTML5data-parsley-maxlength="6"
输入内容的最大字符长度。Length #2.0字符串长度范围
data-parsley-length="[6, 10]"
输入内容的字符长度范围;也可用minlength和maxlength替代此属性的功能。Min #2.0数值最小值
min="6"
HTML5data-parsley-min="6"
验证数值最小值Max #2.0数值最大值
max="10"
HTML5data-parsley-max="6"
验证数值最大值Range #2.0数值范围
type="range"
HTML5data-parsley-range="[6, 10]"
验证数值范围Pattern #2.0正则表达式验证格式
pattern="\d+"
HTML5data-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.0data-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";
1 0
- parsley之验证属性设置
- parsley之表单验证初探
- 表单验证插件 Parsley.js
- Parsley框架之Hello World
- Parsley框架之Hello World
- Parsley 强大的JS表单验证插件
- 简单强大的javascript表单验证 - Parsley.js
- 输入框验证组件,可自行进行设置验证属性
- 美化之ListView属性设置
- 美化之ListView属性设置
- 用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js
- 用户体验超棒并且功能强大使用简单的javascript表单验证 - Parsley.js
- Mvc 安全性之 自定义属性验证
- strut2 学习之验证框架六属性验证示例
- Asp.net_设置Button属性跳过控件验证
- Asp.net_设置Button属性跳过控件验证
- OneThink自动验证设置之自定义错误代码
- Redis学习之设置验证密码
- Java线程基础(1)
- 2017跟着小虎玩着去软考--项目管理师上午考试试题之九(解析2016下半年信息系统项目管理师上午试题35-40题)
- HashMap与LinkedHashMap实现简要说明
- 【eon做开发】不是“eon开发”或者“EON”,请认准【eon做开发】
- linux终端命令行浏览器,w3m文字浏览器使用
- parsley之验证属性设置
- HashMap实现原理
- OpenGL Rendering Pipeline
- GitHub中"watch" "star" "fork"
- XML学习笔记1
- 使用Overcast搭建spring boot应用集成测试环境
- 列出游戏库存的字典功能-用Python自动化无聊的东西-chapter5
- 寄生组合式继承
- JavaScript之学习this