表单验证

姓名:
年龄:
特殊符号:
旧密码:
新密码:
确认新密码:
自定义规则:
附件:
同步查询:
手机:
邮箱:
身份证:
城市:
帝都
魔都
成都
最爱电影:
惊天魔盗团
论文叙老点柳先开
青春梦工厂
电视剧:
简介:

<form class="pui-form ffm fm" action="" id="submitForm" action="">
<div class="row mgt10 required">
    <!-- required 红点样式 -->
    <div class="col-xs-3 col-key tr"><span class="pdr10">姓名:</span></div>
    <div class="col-xs-9 col-val">

        <input type="text" class="txt wp100" data-req="true" data-empty-msg="小哥请留下您的大名" />
        <!-- data-req="true"         // 为必填项 -->
        <!-- data-empty-msg="***"    // 自定义必填框为空的错误提示语句 -->

        <!-- data-reqs="six, spcode, integer, ... "          // 校验规则,可随意组合,请用逗号,隔开 -->

        <input type="text" class="txt wp100" data-reqs="six" />
        <!-- data-reqs="six"    // 最小6位 -->

        <input type="text" class="txt wp100" data-reqs="spcode" />
        <!-- data-reqs="spcode"    // 特殊符号: &#、<加字母、<!、</ -->
        
        <input type="text" class="txt wp100" data-reqs="maxlength" />
        <!-- data-reqs="maxlength"    // 最小长度 -->

        <input type="text" class="txt wp100" data-reqs="minlength" />
        <!-- data-reqs="minlength"    // 最大长度 -->
        
        <input type="text" class="txt wp100" data-reqs="integer" />
        <!-- data-reqs="integer"    // 整数 -->

        <input type="text" class="txt wp100" data-reqs="integerp" />
        <!-- data-reqs="integerp"    // 非零正整数 -->

        <input type="text" class="txt wp100" data-reqs="integern" />
        <!-- data-reqs="integern"    // 非零负整数 -->

        <input type="text" class="txt wp100" data-reqs="integerp0" />
        <!-- data-reqs="integerp0"    // 含零正整数 -->

        <input type="text" class="txt wp100" data-reqs="integern0" />
        <!-- data-reqs="integern0"    // 含零负整数 -->

        <input type="text" class="txt wp100" data-reqs="numberange" data-number-range="-10,10" />
        <!-- data-reqs="numberange"    // 整数范围(含零) -->

        <input type="text" class="txt wp100" data-reqs="mail" />            
        <!-- data-reqs="mail"    // 邮件 -->

        <input type="text" class="txt wp100" data-req="true" data-reqs="customize" data-customize-rule="/^abc/" data-customize-tip="必须以abc开头的字符串" />
        <!-- data-customize-rule=""     // 正则表达式 -->
        <!-- data-customize-tip=""      // 自定义错误信息 -->

        <input type="text" class="txt wp100" data-reqs="mobile" />
        <!-- data-reqs="mobile"    // 手机 // 最新支持 13,14,15,16,17,18,19 开头号码 -->

        <input type="text" class="txt wp100" data-reqs="idcard" />
        <!-- data-reqs="idcard"    // 身份证 // 支持 15,18位 -->

        <input type="text" class="txt wp100" data-reqs="website" />
        <!-- data-reqs="website"    // 网址 -->

        <input type="text" class="txt wp100" data-reqs="chinese" />
        <!-- data-reqs="chinese"    // 中文 -->

        <input type="text" class="txt wp100" data-reqs="upload" data-format="jpg,png,gif" />
        <!-- data-reqs="upload"    // 上传 -->
        <!-- data-format           // 验证格式 -->

        <input type="text" class="txt wp100" data-reqs="psw1" />
        <!-- data-reqs="psw1"    // 旧密码 -->

        <input type="text" class="txt wp100" data-reqs="psw2" />
        <!-- data-reqs="psw2"    // 新密码 -->

        <input type="text" class="txt wp100" data-reqs="psw2b" />
        <!-- data-reqs="psw2b"    // 确认新密码 -->

        <input type="text" class="txt wp100" data-reqs="query" data-query="url" query-string="" />
        <!-- data-reqs="query"    // 同步查询 -->
        <!-- data-query           // 必填,请求路径 -->
        <!-- query-string         // 必填,请求参数,json字符串格式,如 {"id":"0","copyId":"0"},空对象请输入 {} -->

        <!-- 后台接口请参考  -->
        <!-- { Status: true }  -->
        <!-- 或  -->
        <!-- { Status: false, Message: "输入有误" }  -->

        <textarea data-reqs="maxrows" data-max-rows="5"></textarea>
        <!-- data-reqs="maxrows"    // 最大行数,只适用于textarea -->

    </div>
</div>

<div class="row mgt10 required">
    <div class="col-xs-3 col-key tr"><span class="pdr10">附件:</span></div>
    <div class="col-xs-9 col-val">
        <div class="upload-group por100" id="formUpload">
            <div class="pdr10">
                <input name="filetxt" class="txt wp100 fs filetxt" type="text" data-req="true" data-reqs="upload" data-format="jpg,png,gif" readonly />
            </div>
            <div class="abs">
                <input name="filelogo" class="upfile wp100" type="file" id="upLogo" />
                <button class="btn bgc-green c-white wp100 fs" type="button">请选择</button>
            </div>
        </div>
        <!-- 
        data-reqs="upload"  // 上传
        data-format="jpg,png,gif" 验证格式
        -->
    </div>
</div>

<div class="row mgt10 required">
    <div class="col-xs-3 col-key tr"><span class="pdr10">城市:</span></div>
    <div class="col-xs-9 col-val">
        <div class="radio-group clearfix" id="formRadio" data-req="true" data-reqs="radio">
            <div class="radione inline">
                <input type="radio" name="radiobj" value="a" /><span>帝都</span>
            </div>
            <div class="radione inline">
                <input type="radio" name="radiobj" value="b" /><span>魔都</span>
            </div>
            <div class="radione inline">
                <input type="radio" name="radiobj" value="c" /><span>成都</span>
            </div>
        </div>
        <!-- 
        data-reqs="radio"   // radio
        -->
    </div>
</div>
<div class="row mgt10 required">
    <div class="col-xs-3 col-key tr"><span class="pdr10">最爱电影:</span></div>
    <div class="col-xs-9 col-val">
        <div class="check-group clearfix" id="formCheckbox" data-req="true" data-reqs="checkbox">
            <div class="checkone inline">
                <input type="checkbox" name="chkboxbj" value="x" /><span>惊天魔盗团</span>
            </div>
            <div class="checkone inline">
                <input type="checkbox" name="chkboxbj" value="y" /><span>论文叙老点柳先开</span>
            </div>
            <div class="checkone inline">
                <input type="checkbox" name="chkboxbj" value="z" /><span>青春梦工厂</span>
            </div>
        </div>
        <!-- 
        data-reqs="checkbox"    // checkbox
        -->
    </div>
</div>
<div class="row mgt10 required">
    <div class="col-xs-3 col-key tr"><span class="pdr10">电视剧:</span></div>
    <div class="col-xs-9 col-val">
        <select id="formSelect" name="tv" data-width="200px" class="select select-group" data-req="true">
            <option value="" selected>请选择</option>
            <option value="1">平凡的世界</option>
            <option value="2">琅邪榜</option>
            <option value="3">三国演义</option>
            <option value="4">手撕鬼子</option>
        </select>
        <!-- 
        data-reqs="select"  // select
        -->
    </div>
</div>
<div class="row mgt10 required">
    <div class="col-xs-3 col-key tr"><span class="pdr10">简介:</span></div>
    <div class="col-xs-9 col-val">
        <textarea name="textarea" class="textarea wp100" cols="30" rows="5" data-req="true" data-reqs="max" data-max=200></textarea>
    </div>
</div>
<div class="row mgt10">
    <div class="col-xs-3 col-key tr"><span class="pdr10"></span></div>
    <div class="col-xs-9 col-val">
        <button class="btn bgc-red" type="submit">提交</button>
    </div>
</div>
</form>

var validor = new Valid();
validor.form($('#submitForm'), {
    language: 'cn',             // cn, hk, en
    isAsync: true,              // 同步,异步
    isRenderCheckbox: true,     // 是否渲染 checkbox
    isRenderRadio: true,        // 是否渲染 radio
    isRenderSelect: true,       // 是否渲染 select
    scrollToError: false,       // 出现错误时是否定位到错误高度
    asyncFun: function() {      // 验证通过时
        ceng.msger('allow submit', 1)
    },
    errFun: function(){         // 验证不通过时
        // ceng.msger('refuse and check', 0)
    }
});