formcheck

一个表单验证的js插件，不依赖任何框架

安装

npm 的方式
npm install formcheck --save
或
cnpm insatll formcheck --save

支持CDN引入
git地址：https://github.com/cttaohua/formcheck
下载下来后引入dist文件夹下得formcheck.js
<script src="./dist/formcheck.js"></script>

使用

• 在main.js中添加

import formcheck from 'formcheck'

• 在html中使用

<form id="myForm">
    <input type="text" ck ck-type="empty" ck-alert="请输入地址"></br>
    <input type="number" ck ck-type="phone"></br>
    <input type="text" ck ck-type="email"></br>
    <input type="text" ck ck-match="/^[0-9]+.?[0-9]*$/" ck-alert="请输入正确的数字"></br>
    <input id="submit" type="button" value="提交">
</form>
 

• 在js中使用 1、在需要验证的input上加ck 2、需要定义判断的类型，如ck-type="phone"，就按手机号处理，未定义则按必填字段处理 3、可以自定义提示语句，ck-alert="[自定义]"，未定义formcheck会有默认的提示,见下方 4、也可以直接传入一个正则匹配，ck-match="/^[0-9]+.?[0-9]*$/"

var submit = document.getElementById('submit');
            
submit.addEventListener('click',function(){
    var res = checkForm({
        el: 'myForm'
    })
    if(!res.result) {
        alert(res.info);
    }else {
        //todo
    }
})

调用formcheck会返回一个对象，其中包括两个属性 1、result result为true表示表单验证通过，为false表示有的项验证不通过 2、info info返回的是需要提示的信息checkform会有一些默认提示

示例：{result: false, info: "请输入正确的手机号"}

• 目前支持的类型

{
    phone: 'phone',    //电话号
    number: 'number',  //数字
    empty: 'empty',    //必填
    email: 'email'     //邮箱
}

• formcheck默认设定的提示语

{
    phone: '请输入正确的手机号',
    number: '请输入有效的数字',
    empty: '此字段不能为空',
    email: '请输入正确的邮箱'
}