<!--  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对象

方法名	返回类型	描述
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>

验证案例

邮箱验证

请输入邮箱

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

不能选择第一个 --请选择-- A B C

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

完整注册案例

注 册

邮箱邮箱格式不对 用户名用户名必须在6-16位 密码密码必须在6-16位,且必须用字母和数字组成 确认密码必须和密码一致 手机号手机号格式不对 验证码验证码不对,验证码是lukang

提交 查看表单是否全对

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

本人留言