简介

validForm.js是一款JS表单验证插件。

使用

1.  引入文件

<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="../src/validForm.js"></script>

2.  HTML

<form id="mainForm">
    方式<select name="method" id="test">
        <option value="">请填写</option>
        <option value="1">a</option>
        <option value="2">b</option>
        <option value="3">c</option>
    </select><br>
    姓名<input type="text" name="name" /><br>
    密码<input type="password" name="pwd" /><br>
    邮箱<input type="text" name="email" /><br>
    <button id="submit">提交</button><br>
</form>

3.  调用

$(function (){
    $('#submit').on('click', function(){
        /*
        * data(校验数据集合): { 校验单元名称： [ 校验元素（css选择器语法），校验规则（正则表达式或内置校验规则），校验提示语(空校验正确提示，其它校验失败提示)] }
        * model（校验模型）: { el: 校验表单（css选择器语法），data：[data[method], data[name]](自定义校验数据集合)}
        * 内置校验规则：
        * 1.empty    空（空的校验规则也可以为null，undefined，''）
        * 2.isNumber 数字格式
        * 3.isEmail  email格式
        * 4.isUrl    url格式
        * 5.isMobile 手机号格式
        * 6.isID     身份证号格式
        * 7.isDate   日期格式（2014-07-05 2014-7-5 或2014/07/05 2014/7/5）
        * */
        var data = {
            method:['select[name="method"]', null, '请选择方式'],
            name:  ['input[name="name"]', , '姓名必填'],
            pwd:   ['input[name="pwd"]', '', '密码必填'],
            email: ['input[name="email"]', 'empty', '邮箱必填']
        };
        var model = {el: '#mainForm', data: data};
        /*
        * 等价写法：
        * var model = {el: '#mainForm', data: [data.method, data.name, data.pwd, data.email]};
        * */
        validForm(model, function(msg){
            alert(msg);
        });
    });
});

相关链接

GitHub 地址 ：https://github.com/reamd/validForm