移动端表单验证，支持自定义提示，以及自定义

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

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

<script src="cxvalidation.js"></script> 从 NPM 安装，作为模块引入

npm install cxvalidation

import cxValidation from 'cxvalidation'; 使用

/** * 获取验证结果 * @returns {object} result */ cxValidation(document.getElementById('input_or_form')); // 检验表单，若未通过进行提示，通过则提交 cxValidation.verify(document.getElementById('form')); // 绑定表单的提交事件，验证通过后才会提交 cxValidation.attach(document.getElementById('form')); result 验证结果

备注：

success 默认行为是触发表单提交。 error 默认行为是让未通过验证的输入控件获取焦点，或者使用 alert 提示信息。

// 设置表单验证未通过时的处理方法（建议搭配其他对话框插件使用） cxValidation.setOptions({ error: (result) => { console.log(result); } }); // 自定义表单验证完成后的处理方式 cxValidation.attach(document.getElementById('form'), { // 验证完成 complete: (result) => { console.log('验证完成', result); }, // 验证通过（定义该函数后，验证通过后表单也不会提交） success: (result) => { console.log('验证通过', result); }, // 验证未通过（用于展示提示信息） error: (result) => { console.log('验证未通过', result); } }); setLanguage 语言配置

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

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

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

<input data-validation="required" data-validation-title="项目名称"> <!-- 验证未通过时的 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]">

建议改为使用 setRules 进行扩展，call 规则只能查找全局方法来使用。

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

// 该方法需为全局变量 var myFunction = function(el, key) { return { status: el.value === key, message: '请填写 ' + key }; };