parsley之验证属性设置
2024-09-30 19:44:37
parsley.js添加表单验证功能,直接在html元素中添加对应属性;
Name | API | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
Required #2.0 必填 |
|
验证元素是否必填。如果设置 data-parsley-required="false" ,,属性失效,元素将不再必填; |
||||||||
Email #2.0 邮箱 |
|
验证元素的值必须是一个邮箱地址; | ||||||||
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" 的支持并不好,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 |
|
输入内容必须为一个url;IE9-不支持type="url"; IE8-不支持data-parsley-type="url"; |
||||||||
Minlength #2.0 字符串最小长度 |
|
输入内容的最小字符长度。 | ||||||||
Maxlength #2.0 字符串最大长度 |
|
输入内容的最大字符长度。 | ||||||||
Length #2.0 字符串长度范围 |
data-parsley-length="[6, 10]" |
输入内容的字符长度范围;也可用minlength和maxlength替代此属性的功能。 | ||||||||
Min #2.0 数值最小值 |
|
验证数值最小值 | ||||||||
Max #2.0 数值最大值 |
|
验证数值最大值 | ||||||||
Range #2.0 数值范围 |
|
验证数值范围 | ||||||||
Pattern #2.0 正则表达式验证格式 |
|
在属性中验证正则表达式格式 | ||||||||
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";
最新文章
- 本地xdebug调试搭建 Laravel+homestead+phpstorm
- golang中不定参数与数组切片的区别
- Net力软快速信息化系统开发框架 + 开发手册+数据库说明
- 升级vs工程到vs2010(以上)工程找不到OutputDebugStr报错
- Node 写文件
- Oracle 10g 之自动收集统计信息
- 将应用程序中的一些参数写到xml配置文件中
- 自己动手写控件(模仿mvc htmlhelper的类)
- C语言位运算
- 使用函数指针和多态代替冗长的if-else或者switch-case
- Graph - leetcode [图]
- Linux中KVM桥接的配置
- 人机交互之QQ拼音
- 周鸿祎与85后的座谈(一):人人需要Mentor,世界没有奇迹
- http缓存详解,http缓存推荐方案
- 使用终端执行.app程序 for mac
- AppCrawler自动化遍历使用详解(版本2.1.0 )
- jQuery入门讲解
- HDFS 的运行机制
- Java 按行拆分txt
热门文章
- android 加密手机完毕后待机两分钟出现有频率的杂音
- Growth: 一个关于怎样成为优秀Web Developer 的 App
- cout 堆栈,operator&;lt;&;lt; 运算符重载输出问题
- Cocos2D-X2.2.3学习笔记12(瞬时动作)
- android菜鸟之路-事件分发机制总结(二)
- tesnorflow conv deconv,padding
- asp.net mvc 的 视图(view )的模块化开发
- commons-fileupload 组件实现文件上传
- HDU 5753Permutation Bo
- 【Codevs 1376】帕秋莉•诺蕾姬