zValidate

移动端表单验证插件

• 基于zepto.js;
• resource中的图片文件就一张二维码图片，仅仅用于扫描
• css/demo.css文件仅仅是页面布局CSS
• css/zValidate.css写的是控件和表单的简单样式，可自定义
• test中index.html对验证规则做了简单的测试，使用的是jasmine测试框架
• 就200多行代码，对于不符合使用项目的部分，可随意修改

移动端展示

Demo http://pwstrick.github.io/zValidate

开始使用 zValidate

使用zValidate最简单的办法是查阅我提供的简易例子，请浏览index.html的内容

载入zValidate

引入CSS文件和zepto库文件，还有zValidate类文件，这里说明一下 zValidate.css仅仅是表单和控件的样式，完全可以自定义

<!--zValidate.css可自定义-->
<link rel="stylesheet" href="styles/zValidate.css" />
<script src="scripts/zepto/zepto.js"></script>
<script src="scripts/zValidate.js"></script>

初始化一个zValidate

$('.validate').zValidate();

zValidate演示中的表单结构

控件是由fieldset包裹的，input输入框使用了form-control样式类，一个form表单在最外面，里面有个submit按钮

<form id="validate3" method="post">
  <div class="form-horizontal">
    <fieldset class="form-group">
      <div class="controls">
        <input class="form-control" type="text" name="xxx"/>
      </div>
    </fieldset>
    <fieldset>
        <button type="submit">提交</button>
    </fieldset>
  </div>
</form>

下面是zValidate详细的选项配置列表

选项	类型	默认值	说明
errorClass	{string}	"error"	错误样式
errorElement	{string}	"label"	展示错误信息的标签
errorContainer	{string} {object}	""	展示错误信息的容器对象
debug	{boolean}	false	开启或关闭调试
errorPlacement	{function}	null	自定义处理出错方法，有两个参数 $error:错误对象 $element:当前控件对象
highlight	{function}		设置错误高亮方法 这里引用this的话，引用的是当前初始化的zValidate对象
unhighlight	{function}		取消错误高亮方法 这里引用this的话，引用的是当前初始化的zValidate对象
submit	{function}		自定义提交逻辑方法 可在里面写ajax等方法 这里引用this的话，引用的是当前初始化的zValidate对象

联系我

对zValidate的使用有任何问题,或者发现bug,欢迎给我反馈： 提交反馈

License (MIT)

Copyright (c) 2015 pwstrick

MIT