Vali.js

Vali.js （当前版本 v1.0）提供快速验证表单的很强大的控件。由于是初版，问题还有很多，希望大家能多多协助。

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	表单的验证标识符
disparityH	8	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	数组	自定义验证方法，很灵活

验证标识	设置值	描述
email	t	验证邮箱
phone	t	验证手机号
max	16	长度不能大于设置值
min	6	长度不能小于设置值
bank	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	t	验证身份证
equally	id,class	值必须一致如果多元素则取第一个元素的值进行验证
date	t	验证日期格式例如：1996-05-21 = ture \| 1996-02-30 = false
cannot	on	选择值不能是设置值此验证针对于 select
custom	t	自定义验证方法涉及很多，请看案例

var vali_prompt = {
            "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",
            "value0": "Chinese character",
            "value1": "Letter",
            "value2": "Number",
            "value3": "Space character"
        };

自定义提示框一定要在 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" phone="t" vali>
</form>
<script type="text/javascript">
    $(".form").vali();
</script>

暂时 170 开头的验证失败。

Max验证

<form class="form">
    <!-- max=5 则上限为5 -->
    <input type="text" max="2" vali>
</form>
<script type="text/javascript">
     $(".form").vali();
</script>

此验证跟min更配哟~

Min验证

<!-- 用法同 Max -->

银行卡验证

<input type="text" bank="t" vali>

only验证

<input type="text" only="1,2,_" vali>

注意：此处 1 代表字母 2 代表数字 _ 就代表本身
如果想加汉字则是 0,1,2,_
空格字符是 3 其他特定则就是本身比如 _ ，如果想加 # 则是 1,2,_,# 用逗号隔开

must验证

<input type="text" must="1,2,_" vali>

同 only验证。

first_must验证

<input type="text" first_must="1" vali>

注意：此处 1 代表字母 2 代表数字 _ 就代表本身
如果验证汉字则是 0 ，空格字符是 3
其他特定则就是本身比如首位必须是 _ 则直接 first_must="_"

first_cannot验证

<input type="text" first_cannot="1" vali>

同 first_must验证

货币验证

<input type="text" number="t" vali>

小数点位数请设置属性 decimal_places

身份证验证

<input type="text" idcard="t" vali>

身份证验证，没什么好说的....

equally验证

<input type="text" id="qq" value="1029131145">
<input type="text" equally="#qq" vali>

如果没有ID，则写 equally=".class" .如果多元素则取第一个元素的值

日期验证

<input type="text" date="t" vali>

日期格式：1996-09-24 or 1996-9-24
错误格式：1996-2-30

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>

此验证主要针对于 select 当然 input 也可用！

<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>

元素属性 ele 和自定义ele必须一致多个自定义 ele不能重复
fun 必须返回 true or false 且必须带参数 e ，e 代表 input本身
err 是错误提示语

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

Action

下载

包含的内容