下载

Vali.js (当前版本 v 1.3)提供快速验证表单的很强大的控件。希望大家能多多协助。

包含的内容

Vali.js 插件全部依赖 jQuery

请注意,Vali.js 的所有 JavaScript 插件都依赖 jQuery,因此 jQuery 必须在 Vali.js 之前引入,就像在基本模版中所展示的一样。在 package.json 文件中 列出了 Vali.js 所支持的 jQuery 版本。

安装

<!--  vali.js 核心 CSS 文件 主要是错误和正确的样式框 -->
<link rel="stylesheet" href="css/vali.css">

<!-- jQuery文件。务必在vali.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- vali.js 核心 JavaScript 文件 -->
<script src="js/vali.min.js"></script>

属性

属性名 默认值 类型 描述
vali vali String 表单的验证标识符
class_error vali_error String 验证失败的输入框样式
class_success vali_success String 验证成功的输入框样式
disparityH 4 Number 提示框的Y轴误差
disparityW 0 Number 提示框的X轴误差
prompt_width true Boolean 提示框的宽度是否和输入框一样长
prompt_log false Boolean 控制台步骤输出
success_show false Boolean 验证成功提示框是否显示
icon_show true Boolean 是否显示小图标
icon_img false Boolean 是否把字体图标替换成图片图标
icon_img_eu "" String 验证失败的图片图标的URL路径
icon_img_su "" String 验证成功的图片图标的URL路径
decimal_places 2 Number 验证货币类型的小数点位数
custom null 数组 自定义验证方法,很灵活
window_show true Boolean 是否显示浮动窗口提示
pe v 1.3 false Boolean 通过用户code提示失败
ps v 1.3 false Boolean 通过用户code提示成功

22种验证

验证标识 设置值 描述
email t 验证邮箱
phone t 验证手机号
max 16 长度不能大于设置值
min 6 长度不能小于设置值
bank v 1.1 t 验证银行卡号
必须是真实的银行卡
only 0,1,2,3,_ 只能用设置值类型组成
0 = 汉字 1 = 字母 2 = 数字 3 = 空字符
must 0,1,2,3,_ 必须用设置值类型组成
同 only
first_must 1 首位必须是设置值类型
0 = 汉字 1 = 字母 2 = 数字 3 = 空字符
first_cannot 1 首位不能是设置值类型
同 first_must
number t 验证货币类型
自动转化成货币类型
保留2位小数
小数位可以通过属性 decimal_places 设置
idcard v 1.1 t 验证身份证
equally id,class 值必须一致
如果多元素则取第一个元素的值进行验证
date t 验证日期格式
例如:1996-05-21 = ture | 1996-02-30 = false
time v 1.3 t 验证时间格式
例如:12:02:02 = ture | 30:30:600 = false
datetime v 1.3 t 验证时间格式
例如:2016-02-15 14:17:04
cannot on 选择值不能是设置值
此验证针对于 select
custom t 自定义验证方法
涉及很多,请看案例
minmax v 1.3 6-16 OR 6,16 长度区间
http v 1.3 t 验证网址
number_max v 1.3 50 数字不能大于设置值
number_min v 1.3 10 数字不能小于设置值
number_minmax v 1.3 10-50 OR 10,50 数字大小区间

vali对象

$.vali对象

vali 方法返回一个 vali 对象。vali 对象有很多方法可以用来引发校验程序或者改变 form 的内容,下面列出几个常用的方法。

方法名 返回类型 描述
setPrompt(a) 无返回 设置提示语
form(a, b) Boolean 验证 form 返回成功还是失败
ele(a) Boolean 验证单个元素是成功还是失败。
promptHide(a) 无返回 隐藏所有提示

自定义提示框

<script type="text/javascript">
    $.vali.setPrompt({
        "Success": "Success",
        "email": "Please enter the correct email address",
        "phone": "Please enter the correct cell phone number",
        "max": "Can not exceed {0} characters",
        "min": "Not less than {0} characters",
        "bank": "Please enter the correct bank card number",
        "only": "Contain only",
        "must": "Must contain",
        "first_must": "The first must be:",
        "first_cannot": "The first cannot be:",
        "number": "Please enter a number",
        "idcard": "Please enter the correct ID number",
        "equally": "Must be the same",
        "cannot": "cannot is {0}",
        "date": "Please enter the correct date",
        "http": "Please enter the correct URL",
        "number_max": "Can not be greater than {0}",
        "number_min": "Can not be less than {0}",
        "time": "Please enter the correct time",
        "datetime": "Please enter the correct date time",
        "value0": "Chinese",
        "value1": "Letter",
        "value2": "Number",
        "value3": "Space"
    });
</script>

自定义提示框一定要在 Vali.js 之后引入

请注意:不可更改验证属性名,{0}是替换符号

验证案例

包含14种验证案例

请注意,这行字,其实没有什么特殊的,哈哈。

邮箱验证

请输入邮箱
<form class="form">
    <input type="text" email="t" vali>
</form>
<script type="text/javascript">
    $(".form").vali();
</script>

手机号验证

请输入手机号
<form class="form">
    <input type="text" bl="152,136" phone="t" vali>
</form>
<script type="text/javascript">
    $(".form").vali();
</script>

Max验证

不能超过2个字符
<form class="form">
    <!-- max=5 则上限为5 -->
    <input type="text" max="2" vali>
</form>
<script type="text/javascript">
     $(".form").vali();
</script>

Min验证

必须超过2个字符
<!-- 用法同 Max -->

银行卡验证

银行卡
<input type="text" bank="t" vali>

only验证

只能用字母数字下划线组成
<input type="text" only="1,2,_" vali>

must验证

必须用字母数字下划线组成
<input type="text" must="1,2,_" vali>

first_must验证

首位必须是字母
<input type="text" first_must="1" vali>

first_cannot验证

首位不能是字母
<input type="text" first_cannot="1" vali>

货币验证

请输入钱
<input type="text" number="t"  dp="3" vali>

身份证验证

请输入身份证
<input type="text" idcard="t" vali>

equally验证

值必须和我一样
必须跟上面一样
<input type="text" id="qq" value="1029131145">
<input type="text" equally="#qq" vali>

日期验证

请输入日期
<input type="text" date="t" vali>

cannot验证

不能选择第一个
<select cannot="no" vali>
    <option value="no">--请选择--</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>

Custom自定义验证案例

大于50 且是奇数
<form class="form">
    <input type="text" custom="t" ele="custom" vali>
</form>
<script type="text/javascript">
    $(".form").vali({
        "custom":[{
            "ele":"custom",
            "fun":function (e){
                var v= parseInt(e.val());
                if(isNaN(v)||v<=50){
                    return false;
                }
                if(v % 2==0){
                    return false;
                }
                return true;
            },
            "err":"必须大于50 且是奇数"
        }]
    });
</script>

提示框自定义 v1.3

请输入邮箱
<input type="text" email="t" pe="#pe" ps="#ps" vali>
<span id="pe" style="display:none">输入错误</span>
<span id="ps" style="display:none">输入正确</span>
<script type="text/javascript">
    $(".form").vali({
        "window_show":false,
        "pe":true,
        "ps":true
    });
</script>

显示成功提示框

请输入邮箱
<script type="text/javascript">
     $(".form").vali({
           "success_show":true
     });
</script>

完整注册案例

注 册

<div class="zhuce">
    <label class="tit">邮箱<span class="fr s1">邮箱格式不对</span></label>
    <input type="text" class="input" pe=".zhuce .s1"  email="t" vali>

    <label class="tit">用户名<span class="fr s2">用户名必须在6-16</span></label>
    <input type="text" class="input"  minmax="6,16" pe=".zhuce .s2" vali>

    <label class="tit">密码<span class="fr s3">密码必须在6-16位,且必须用字母和数字组成</span></label>
    <input type="password" class="input" id="pwd" pe=".zhuce .s3" minmax="6,16" must="1,2" vali>

    <label class="tit">确认密码<span class="fr s4">必须和密码一致</span></label>
    <input type="password" class="input" pe=".zhuce .s4"  equally="#pwd" vali>

    <label class="tit">手机号<span class="fr s5">手机号格式不对</span></label>
    <input type="text" class="input" pe=".zhuce .s5"  phone="t" vali>

    <label class="tit">验证码<span class="fr s6">验证码不对,验证码是LUKANG</span></label>
    <input type="text" class="input" pe=".zhuce .s6" custom="t" ele="a" vali>

    <div class="zhuce_btn">
        <button type="submit" id="submit" class="button">提交</button>
        <button type="button" id="btn" class="button">查看表单是否全对</button>
    </div>
</div>
<script type="text/javascript">
    $("#form").vali({
        "window_show":false,
        "pe":true,
        "custom":[{
            "ele":"a",
            "fun":function(e){
                return e.val()=="LUKANG";
            }
        }]
    });
    $("#btn").click(function(){
        //vali对象的form方法。
        var i=$.vali.form("#form");
        alert(i);
    });
</script>

本人留言

Hello, world!

一切都是为了方便,希望多多指导,多多协助。o(∩_∩)o

GitHub