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

时间：2022-05-31 20:34:16

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

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

效果展示：

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

代码如下：

<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

相关文章