Parsley.js学习笔记

最新推荐文章于 2019-03-20 11:25:46 发布

weixin_33701251

最新推荐文章于 2019-03-20 11:25:46 发布

阅读量257

点赞数

文章标签： python 前端 javascript ViewUI

原文链接：https://my.oschina.net/alazyer/blog/737995

版权

2019独角兽企业重金招聘Python工程师标准>>>

作用

用来进行前端form校验.

自己使用中过程中碰到的两点:

默认需要form的提交按钮type="submit", 否则即使做了相关parsley配置, 也不进行相关校验.
表单的取消按钮需要有type=button设置, 否则在input框中输入回车模态框会消失.

安装

parsley.js依赖于jquery，因而在引入parsley.js之前需要首先引入jquery。然后在想要添加校验的form元素上添加*data-parsley-validate*属性即可。

<!DOCTYP html>
<html>
  <head>
    <link href="bootstrap.min.css" rel="stylesheet"></link>
    <link href="parsley.min.css" rel="stylesheet"></link>
  </head>
  <body>
    <form data-parsley-validate>
    </form>
    <script src="jquery.js"></script>
    <script src="parsley.js"></script>
    <script src="i18n/zh_cn.js"></script>
  </body>
</html>

自带的validators

类型限制

data-parsley-type="email"
data-parsley-type="number"
data-parsley-type="integer"
data-parsley-type="digits"
data-parsley-type="alphanum"
data-parsley-type="url"

长度限制

data-parsley-require
data-parsley-minlength="4"
data-parsley-maxlength="14"
data-parsley-length="[4, 14]"

数值限制

data-parsley-min="4"
data-parsley-max="14"
data-parsley-range="[4, 14]"

多选框选择数限制

data-parsley-mincheck="4"
data-parsley-maxcheck="14"
data-parsley-check="[4, 14]"

其他

data-parsley-pattern="\d+" // 正则表达式限制
data-parsley-equalto="#objId" // 值相等限制

自定义validators

自定义validators时，需要使用Parsley.addValidator方法，传入validator的名字和配置．

配置中包含：

requirementType: validator接受的参数类型(可选为: integer, string, number, regex, boolean)
validateFunc：validator验证方法（可选为: validateNumber, validateString, validateMultiple)
messages：验证失败提示

官方文档中例子

[...]
<input type="text" data-parsley-multiple-of="3" />
[...]

<script type="text/javascript">
window.Parsley.addValidator('multipleOf', {
    requirementType: 'integer',
    validateNumber: function(value, requirement) {
      return 0 === value % requirement;
    },
    messages: {
      en: 'This value should be a multiple of %s'
    }
  });
</script>

自定义远程校验

[...]
<input name="q" type="text" data-parsley-remote data-parsley-remote-validator='mycustom' value="foo" />
[...]

<script href="parsley.remote.js"></script>
<script type="text/javascript">
window.Parsley.addAsyncValidator(
  'mycustom',  // 名字
  function (xhr) {
    return 404 === xhr.status;
  }, // 校验方法
  'http://mycustomapiurl.ext', // 请求的远程地址
);
</script>