关闭

easyui 表单验证

868人阅读 评论(0) 收藏 举报

这里出发form的submit事件,将数据提交给后台

这里的提交个人觉得不是纯正的ajax提交,因为有刷新页面 //以为我们的form有validate方法,而且在源码中也有判断,所以我们直接这样submit就可以触发validatebox的验证方法
$.fn.form.defaults={url:null,onSubmit:function(_2e){return $(this).form("validate");
如果我们不使用easyui的form框架的提交方式,用JQ的异步提交,我们就需要这样写:
if($("#regist").form("validate")){}

复制代码
<script type="text/javascript">
        $(function () {
            //初始化登陆层
            initLogin();
            //首先隐藏注册的层
            $("#regist").css("display", "none");
            //注册Form
            initForm();
        });

        //个人习惯方法化书写
        function initLogin() {
            $("#login").dialog({
                closable: false, //右上角的关闭按钮,因为dialog框架关联的是window框架,window框架关联的是panel框架,所以该API是在panel框架中找到的
                title: "登陆界面", //dialog左上角的名称
                modal: true, //模式化
                width: 300,
                height: 200,
                buttons: [//dialog右下角的按钮,以Json数组形式添加
                   {
                   text: "登录", //按钮名称
                   iconCls: "icon-save", //按钮左侧显示的图片
                   handler: function () {//按钮点击之后出发的方法
                       //JQuery的ajax异步后台提交
                       loginFunc();
                   }
               }, {
                   text: "注册",
                   handler: function () {
                       //注册明天再写,将用easyui自带的form提交方式,以及自带的ValidateBox验证方式
                       registFunc();
                   }
               }]
            });
        }

        //用户登录
        function loginFunc() {
            //这里我写的是最简略的JQuery异步方法,如想深入了解,请参看JQuery参考手册
            //要想后台传递的参数
            var res = $("#loginForm").serialize(); //将form表单的内容序列化,这里也可以使用原始的取值方法
            //mvc以及webform中可以直接传递到后台
            $.post("/Login.ashx", res, function (data) {
                if (data == "ok") {//后台传递过来 ok 表示登陆成功
                    $("#dd").dialog("close"); //关闭该dialog
                    $.message.show({//浏览器右下角弹框,我列出了几个属性,具体请看API
                        title: '提示',
                        msg: '恭喜您,登陆成功!',
                        timeout: 5000, //弹框保留时间
                        showType: 'slide'//展示样式
                    });
                } else {
                    $.message.alert('提示', "登陆失败", "error"); //这里使用easyui的message框架,弹出提示信息
                    //这里有三个参数 第一个是Title 第二个是显示信息 第三个是现实图标样式 有error,warning等,具体请看API或者demo
                }
            });
        }


        //注册方法
        function registFunc() {
            //弹出注册的层,并关闭当前登录的层
            $("#login").dialog("close");
            //初始化注册层
            initRegist();
        }

        //初始化注册层
        function initRegist() {
            //注册层隐藏关闭
            $("#registForm").dialog({
                closable: false,
                title: "注册界面",
                modal: true,
                width: 300,
                height: 600,
                buttons: [
                   {
                       text: "注册",
                       handler: function () {
                           //这里出发form的submit事件,将数据提交给后台
                           //这里的提交个人觉得不是纯正的ajax提交,因为有刷新页面                           //以为我们的form有validate方法,而且在源码中也有判断,所以我们直接这样submit就可以触发validatebox的验证方法
                           //$.fn.form.defaults={url:null,onSubmit:function(_2e){return $(this).form("validate");
                           //如果我们不使用easyui的form框架的提交方式,用JQ的异步提交,我们就需要这样写:
                           //if($("#regist").form("validate")){}
                           $("#registForm").submit();
                       }
                   }, {
                       text: "关闭",
                       handler: function () {
                           //关闭注册的dialog
                           $("#regist").dialog("close");
                           //开启登陆层
                           $("#login").dialog("open");
                       }
                   }]
            });
        }

        //初始化注册Form
        function initForm() {
            $("#registForm").form({
                url: "Login.ashx",
                success: function (data) {
                    if (data == "ok") {//注册成功
                        $.message.alert('提示', "注册成功", "error");
                        $("#dd").dialog("open");
                    } else {
                        $.message.alert('提示', "注册失败", "error");
                    }
                }
            });
        }

        //这里是扩展validatebox的方法
        $.extend($.fn.validatebox.defaults.rules, {
            phone: {
                // 验证手机号码
                validator: function (value) {
                    return /^(13|15|18)\d{9}$/i.test(value); //这里就是一个正则表达是
                },
                message: '手机号码格式不正确'//这里是错误后的提示信息
            },
            pwdagain: {
                validator: function (value, param) {
                    return value == $(param[0]).val(); //value是不用我们去填写的,但是param是需要我们提供的,使用方法为 pwdAgain[""]
                },
                message: '两次密码不一致'//这里是错误后的提示信息
            }
        });
    </script>
复制代码

 

这里的文本框全部采用validatebox框架,并采用其自带的验证方式,但是自带的验证方式并不能满足我们在编程中的需求,所以我会扩展几个他的验证方法,其中扩展方法我在之前的博客中已经写过,这里再给大家演示一下
 data-options在这个里面写一些规则,比如easyui自带的验证方式,required:true必填项,validType:'email'必须是邮箱格式,当然这些我们都可以自己去扩展,其中自己扩展的方法书写形式类似validType:'email',validType:'phone'这是我自己扩展的验证手机号码的方法
这是validatebox自带remote验证方法的源码,我们可以看出,这里不是异步的,所以使用可能会早场卡屏,不推荐使用
remote: { validator: function (_2a, _2b) {
var _2c = {};
_2c[_2b[1]] = _2a;
var _2d = $.ajax({ url: _2b[0], dataType: "json", data: _2c, async: false, cache: false, type: "post" }).responseText;
return _2d == "true";
}, message: "Please fix this field."
}

复制代码
<body>
    <div id="login">
        <form id="loginForm" method="POST">
        <table>
            <tr>
                <th>
                    用户名
                </th>
                <td>
                    <input name="username" type="text" />
                </td>
            </tr>
            <tr>
                <th>
                    密码
                </th>
                <td>
                    <input name="password" type="password" />
                </td>
            </tr>
        </table>
        </form>
    </div>
    <!-- 用户注册-->
    <div id="regist" style="border: 1px #0000cd solid;">
        <form id="registForm" method="POST">
        <table>
            <tr>
                <th>
                    用户名
                </th>
                <td>
                    <input name="name" id="name" class="easyui-validatebox" data-options="required:true" />
                    <!-- 这里的文本框全部采用validatebox框架,并采用其自带的验证方式,但是自带的验证方式并不能满足我们在编程中的需求,所以我会扩展几个他的验证方法,其中扩展方法我在之前的博客中已经写过,这里再给大家演示一下-->
                    <!-- data-options在这个里面写一些规则,比如easyui自带的验证方式,required:true必填项,validType:'email'必须是邮箱格式,当然这些我们都可以自己去扩展,其中自己扩展的方法书写形式类似validType:'email',validType:'phone'这是我自己扩展的验证手机号码的方法-->
                    <!--这是validatebox自带remote验证方法的源码,我们可以看出,这里不是异步的,所以使用可能会早场卡屏,不推荐使用
        remote: { validator: function (_2a, _2b) {
        var _2c = {};
        _2c[_2b[1]] = _2a;
        var _2d = $.ajax({ url: _2b[0], dataType: "json", data: _2c, async: false, cache:             false, type: "post" }).responseText;
        return _2d == "true";
        }, message: "Please fix this field."
                    }-->
                </td>
            </tr>
            <tr>
                <th>
                    密码
                </th>
                <td>
                    <input name="pwd" id="pwd" class="easyui-validatebox" data-options="required:true" />
                </td>
            </tr>
            <tr>
                <th>
                    重复密码
                </th>
                <td>
                    <input name="passwordagain" id="passwordagain" class="easyui-validatebox" data-options="required:true"
                        validtype="pwdagain['#registForm input[name=pwd]']" /><!--取得重复密码中的值并传入,这里调试了半天,因为各种不仔细报错,希望大家避免-->
                    <!-- 经验证,data-options="required:true,validType='pwdagain['#registForm input[name=pwd]']'"这种写法会报错,望大家注意-->
                </td>
            </tr>
            <tr>
                <th>
                    邮箱
                </th>
                <td>
                    <input name="mail" id="mail" class="easyui-validatebox" data-options="required:true,validType:'email'" />
                </td>
            </tr>
            <tr>
                <th>
                    手机
                </th>
                <td>
                    <input name="phone" id="phone" class="easyui-validatebox" data-options="required:true,validType:'phone'" />
                </td>
            </tr>
        </table>
        </form>
    </div>
</body>
复制代码
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:111265次
    • 积分:1840
    • 等级:
    • 排名:千里之外
    • 原创:55篇
    • 转载:148篇
    • 译文:1篇
    • 评论:1条