easyui validatebox textbox 使用例子

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFormTextbox.aspx.cs" Inherits="WebApplicationEasyUI.WebFormTextbox" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="Resurces/themes/default/easyui.css" rel="stylesheet" />
    <link href="Resurces/themes/icon.css" rel="stylesheet" />
    <script src="Resurces/Javascript/jquery.min.js"></script>
    <script src="Resurces/Javascript/jquery.easyui.min.js"></script>
    <!-- textbox !-->
    <script>
        $.extend($.fn.validatebox.defaults.rules, {
            /*必须和某个字段相等*/
            equalTo: {
                validator: function (value, param) {
                    return $(param[0]).val() == value;
                },
                message: '字段不匹配'
            }

        });

        //validType类型：
        //1."email"
        //2.length[5,10]
        //3.url
        $(function () {
            $('#vv1').textbox({
                prompt: 'Enter here...',
                required: true,
                missingMessage: '输入邮箱帐号',
                validType: 'email',
                invalidMessage: 'email格式不对'
            });
            $('#vv2').textbox({
                required: true,
                validType:'url',
                missingMessage: '输入密码',
                invalidMessage: 'phone'
            });
            $('#vv3').textbox({
                required: true,
                missingMessage: '输入密码',
                validType: "equalTo['#vv2']",
                invalidMessage: '密码不一样'
            });
            $('#vv1').textbox('setValue','1@1.com');
        });
        function setValue() {
            $('#vv1').textbox("setValue", "123");
        }
        function getValue() {
            var t = $('#vv1').textbox("getValue");
            alert(t);
        }
        function isOK() {
            var isok = $('#vv1').textbox('isValid')
            && $('#vv2').textbox('isValid')
            && $('#vv3').textbox('isValid');

            if (isok) {
                $.messager.alert('info', 'ok');
            }
            else {
                $.messager.alert('info', 'no');
            }
        }
    </script>
    <style>
        input
        {
            margin: 5px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="p" class="easyui-panel" title="mypanel" style="height: 200px; width: 700px; padding: 10px;">
            帐号：<input id="vv1" /><br />
            密码：<input id="vv2" type="password" /><br />
            确认密码：<input id="vv3" type="password" /><br />
            <input type="button" id="btn1" value="setValue" onclick="setValue()" />
            <input type="button" id="btn2" value="getValue" onclick="getValue()" /><br />

            <input type="button" value="提交" onclick="isOK()" />
        </div>
    </form>
</body>
</html>
posted on 2017-09-14 07:10 biind 阅读(961) 评论(0) 编辑收藏举报