jQuery EasyUI/TopJUI创建文本验证框（不写js,纯HTML实现!!!）

jQuery EasyUI/TopJUI创建文本验证框（不写js,纯HTML实现!!!）

validatebox(验证框)的设计目的是为了验证输入的表单字段是否有效。如果用户输入了无效的值，它将会更改输入框的背景颜色，并且显示警告图标和提示信息。该验证框可以结合form(表单)插件并防止表单重复提交。

效果展示：

代码如下：

<div data-toggle="topjui-panel" title="" data-options="fit:true,iconCls:'icon-ok',footer:'#footer'">
    <div class="topjui-container">
        <fieldset>
            <legend>基础演示</legend>
        </fieldset>
        <div class="topjui-row">
            <div class="topjui-col-sm6">
                <label class="topjui-form-label">普通文本框</label>
                <div class="topjui-input-block">
                    <input type="text" name="userNameId" data-toggle="topjui-textbox">
                </div>
            </div>
            <div class="topjui-col-sm6">
                <label class="topjui-form-label">必填文本框</label>
                <div class="topjui-input-block">
                    <input type="text" name="userName" data-toggle="topjui-textbox"
                           data-options="required:true, value:'这是必填的输入框'">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm6">
                <label class="topjui-form-label">URL地址</label>
                <div class="topjui-input-block">
                    <input type="text" name="url" value="http://www.topjui.com" data-toggle="topjui-textbox"
                           data-options="required:true,validType:'url'">
                </div>
            </div>
            <div class="topjui-col-sm6">
                <label class="topjui-form-label">电子邮箱</label>
                <div class="topjui-input-block">
                    <input type="text" name="email" value="service@ewsd.cn" data-toggle="topjui-textbox"
                           data-options="required:true,validType:['email','length[0,20]']">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm6">
                <label class="topjui-form-label">用户名</label>
                <div class="topjui-input-block">
                    <input type="text" name="userNameId2" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'用户名是必填的信息'">
                </div>
            </div>
            <div class="topjui-col-sm6">
                <label class="topjui-form-label">姓名</label>
                <div class="topjui-input-block">
                    <input type="text" name="userName2" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'姓名是必填的信息'">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm12">
                <label class="topjui-form-label">文章标题</label>
                <div class="topjui-input-block">
                    <input type="text" name="title" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'这是指定了宽为450px的必填文本输入框'">
                </div>
            </div>
        </div>

    </div>
</div>

　　

EasyUI中文网：http://www.jeasyui.cn

TopJUI前端框架：http://www.topjui.com

TopJUI交流社区：http://ask.topjui.com