zoukankan      html  css  js  c++  java
  • parsley之验证属性设置

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

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

  • 相关阅读:
    Python 学习笔记 11.模块(Module)
    Python 学习笔记 8.引用(Reference)
    Python 学习笔记 9.函数(Function)
    Python 学习笔记 6.List和Tuple
    Python 学习笔记 4.if 表达式
    Python 学习笔记 2.自省
    Python 学习笔记 3.简单类型
    Python 学习笔记 7.Dictionary
    Python 学习笔记 5.对象驻留
    Python 学习笔记 10.类(Class)
  • 原文地址:https://www.cnblogs.com/telwanggs/p/7435480.html
Copyright © 2011-2022 走看看