cxValidation 移动端表单验证

载入 CSS 文件

<link rel="stylesheet" href="cxvalidation.css">

载入 JavaScript 文件

<script src="zepto.js"></script>
<script src="cxvalidation.js"></script>

获取验证结果

// 结果返回 true 或 false

// JavaScript
cxValidation(document.getElementById('input_id'));
cxValidation(document.getElementById('form_id'));

// jQuery or Zepto
$.cxValidation($('#input_id'));
$.cxValidation($('#form_id'));

绑定表单验证

// 绑定表单的提交事件，验证失败会有提示，验证通过后才会提交
// JavaScript
cxValidation.attach(document.getElementById('form_id'));

// jQuery or Zepto
$.cxValidation.attach($('#form_id'));

var options = {
  complete: function(result) {
    console.log('验证完成', result);
  },
  success: function(result) {
    console.log('验证通过', result);
  },
  error: function(result) {
    console.log('验证失败', result);
  }
};

// 简易方法，快速设置验证成功及失败的回调
cxValidation(document.getElementById('input_id'), options.success, options.error);
cxValidation(document.getElementById('form_id'), options.success, options.error);
cxValidation.attach(document.getElementById('form_id'), options.success, options.error);

// 完整方法，可设置验证完成、成功及失败的回调
cxValidation(document.getElementById('input_id'), options);
cxValidation(document.getElementById('form_id'), options);
cxValidation.attach(document.getElementById('form_id'), options);

回调函数参数 result 说明

验证规则放置在input的data-validation属性中，如使用多个规则，用,分割

<input data-validation="required">
<input data-validation="required,integer">
<input data-validation="required,integer,min[3]">

<input data-validation="required" data-validation-message="该项为必填">