当前位置: 首页 > 工具软件 > Parsley > 使用案例 >

parsley之验证属性设置

微生新霁
2023-12-01

https://blog.csdn.net/qinshijangshan/article/details/66166843?tdsourcetag=s_pctim_aiomsg

 

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.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";

 类似资料: