EasyUI-模糊验证


@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/EasyUI/themes/icon.css" rel="stylesheet" />
    <link href="~/Content/EasyUI/themes/default/easyui.css" rel="stylesheet" />

</head>
<body>
    <h2>Validate On Blur</h2>
    <p>Active validation on first blur event.</p>
    <div style="margin:20px 0;"></div>
    <div class="easyui-panel" title="Register" style="width:400px;padding:10px 60px 20px 60px">
        <table cellpadding="5">
            <tr>
                <td>User Name:</td>
                <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'length[3,10]',novalidate:true"></td>
            </tr>
            <tr>
                <td>Email:</td>
                <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'email',novalidate:true"></td>
            </tr>
            <tr>
                <td>Birthday:</td>
                <td><input class="easyui-datebox textbox" data-options="required:true,novalidate:true"></td>
            </tr>
            <tr>
                <td>URL:</td>
                <td><input class="easyui-validatebox textbox" data-options="required:true,validType:'url',novalidate:true"></td>
            </tr>
            <tr>
                <td>Phone:</td>
                <td><input class="easyui-validatebox textbox" data-options="required:true,novalidate:true"></td>
            </tr>
        </table>
    </div>
    <script type="text/javascript">
        $(function () {
            $('.validatebox-text').bind('blur', function () {
                $(this).validatebox('enableValidation').validatebox('validate');
            });
        })
    </script>
    <style scoped="scoped">
        .textbox {
            height: 20px;
            margin: 0;
            padding: 0 2px;
            box-sizing: content-box;
        }
    </style>

</body>
</html>

展开阅读全文

没有更多推荐了,返回首页