cxvalidation v1.3.0

cxValidation

主要面向移动端的表单验证插件，能快速方便的验证表单和单个输入控件，支持基本的验证规则和自定义验证规则。

Demo: http://ciaoca.github.io/cxValidation/

使用方法

载入 JavaScript 文件

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

调用

/**
 * 获取验证结果
 * @returns {object} result
 */
cxValidation(document.getElementById('input_or_form'));

// 检验并提示
cxValidation.verify(document.getElementById('input_or_form'));

// 绑定表单的提交事件，验证通过后才会提交
cxValidation.attach(document.getElementById('form'));

result 验证结果

API 接口

verify, attach, setOptions 参数说明

// 表单验证未通过时，默认处理方法，建议搭配对话框插件进行提示
cxValidation.setOptions({
  error: function(result) {
    console.log(result);
  }
});

// 自定义表单验证完成后的处理方式
cxValidation.attach(document.getElementById('form'), {
  // 验证完成
  complete: function(result) {
    console.log('验证完成', result);
  },
  // 验证通过（定义该函数后，验证通过后表单将阻止提交）
  success: function(result) {
    console.log('验证通过', result);
  },
  // 验证未通过（用于展示提示信息）
  error: function(result) {
    console.log('验证未通过', result);
  }
});

setLanguage 语言配置

// 自定义提示语言，完整配置可参考源码 validMessage
cxValidation.setLanguage({
  titleSymbol: {
    before: '',
    after: '',
  },
  required: {
    input: '必填项'
  },
  email: '请填写正确的邮箱地址'
});

setRules 自定义验证规则

<input data-validation="myFun1[arg1][arg2]">

// 第一个参数为当前验证的输入控件
cxValidation.setRules({
  myFun1: function(el, arg1, arg2) {
    // 返回验证结果对象
    return {
      status: el.value === arg1,  // true: 通过, false: 未通过
      message: '请填写 ' + arg1    // 提示信息
    };
  },
  myFun2: function(el, arg1, arg2) {...}
})

attach() 绑定表单默认处理逻辑

验证通过时

触发表单提交。

验证未通过时

若规则为 required 或 condRequired 时，对应的输入框获取光标焦点。
其他规则，则使用 alert 进行提示。

data 属性参数

<input data-validation="required" data-validation-title="项目名称" data-validation-message="该项为必填">
<!--
验证未通过时 result 对象内容：
{
  status: false,
  message: '【项目名称】该项为必填'
  rule: 'required',
  element: dom
}
-->

data-validation-message 配置

<!-- 所有验证规则都使用相同的提示 -->
<input data-validation="required,minSize[6]" data-validation-message="验证未通过">

<!--
根据验证规则提示
注意：json 格式要求使用双引号，所以外部的需使用单引号
-->
<input data-validation="required,minSize[6]" data-validation-message='{"required":"密码不能为空","minSize":"密码安全性太低，不能少于{{0}}位"}'>

验证规则

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

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

call 自定义验证方法

<input data-validation="call[myFunction][abc]">

var myFunction = function(el, key) {
  return {
    status: el.value === key,
    message: '请填写 ' + key
  };
};