用jQuery和easyui实现登录验证的小功能

最新推荐文章于 2022-03-27 19:57:04 发布

-停泊

最新推荐文章于 2022-03-27 19:57:04 发布

阅读量2.2k

点赞数

文章标签： jquery easyui 布局

本文链接：https://blog.csdn.net/zgz15515397650/article/details/77799793

版权

这里面都包含了easyui的布局样式，验证框，form表单等。
实现了重置密码的验证，密码长度的验证，用不明不能为空的验证和提交是否验证通过等小功能。

    <script type="text/javascript">
        $(function(){
            $.extend($.fn.validatebox.defaults.rules, {
                equals: {
                    validator: function(value,param){
                        if(value == $(param[0]).val()){
                            return true;
                        }else{
                            return false;
                        }
                    },
                    message:'请和密码相同。'
                }
            });
            $.extend($.fn.validatebox.defaults.rules, {
                panduan: {
                    validator: function(value){
                        if(value.length >= 6 && value.length<= 16){
                            return true;
                        }else{
                            return false;
                        }
                    },
                    message: '密码不能少于6位和大于16位。'
                }
            });
        $("#btn1").click(function() {
             $("#ff").form("submit",{
                    url: 'lianxi.jsp',
                    onSubmit: function(){
                        var isValid = $(this).form('validate');
                        if (!isValid){
                            $.messager.progress('close');  // hide progress bar while the form is invalid
                        }
                        return isValid; // return false will stop the form submission
                    },
                    success: function(){
                        location.href="lianxi.jsp";
                    }
                }); 
            });
        });
    </script>
    <style>
        h1{
            text-align:center;
            font-fimaly:"华文琥珀";
            color:#ffcccc;
        }
        p{
            text-align:center;
            font-fimaly:"华文琥珀";
            font-size:12px;
        }
    </style>

  </head>

  <body>
    <div style="margin:20px 0;" ></div>
    <div class="easyui-layout" style="width:auto;height:95%;">
        <div data-options="region:'north'" style="height:80px;">
            <h1>Sun公司简介</h1>
        </div>
        <div data-options="region:'south'" style="height:80px;">
            <p>Jquery EasyUI中文网内容基于EasyUI官网，由EasyUI中文小组翻译整理，完全遵循官方Free - Non-commercial 及CC BY 3.0协议。</p>
            <p>Copyright © 2014 - 2015 Jquery EasyUI中文网, 粤ICP备14024044号-2, All Rights Reserved.</p>
        </div>
        <div data-options="region:'center',title:'主要内容',iconCls:'icon-ok'">
            <form id="ff" action="lianxi.jsp">
                <table align="center">
                    <tr>
                        <td>用户名:</td>
                        <td><input id="name" class="easyui-validatebox" type="text" name="name"
                            data-options="required:true" /></td>
                    </tr>
                    <tr>
                        <td>密码:</td>
                        <td><input id="pwd" class="easyui-validatebox" type="passdord" name="pwd"
                            validType='panduan' /></td>
                    </tr>
                    <tr>
                        <td>重置密码:</td>
                        <td><input id="rpwd" class="easyui-validatebox" type="passdord" name="rpwd"
                            validType="equals['#pwd']" /></td>
                    </tr>
                    <tr>
                        <td><input id="btn1" type="submit" value="登录"></td>
                        <td><input id="btn2" type="button" value="取消"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>

-停泊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用jQuery和easyui实现登录验证的小功能

这里面都包含了easyui的布局样式，验证框，form表单等。实现了重置密码的验证，密码长度的验证，用不明不能为空的验证和提交是否验证通过等小功能。 <script type="text/javascript"> $(function(){ $.extend($.fn.validatebox.defaults.rules, {
复制链接

扫一扫