easyui-textbox注册界面实现双重验证，用户名不能重复和正则

最新推荐文章于 2024-09-16 18:11:01 发布

废柴_1

最新推荐文章于 2024-09-16 18:11:01 发布

阅读量3k

点赞数 2

分类专栏：注册界面实现双重认证文章标签： easyui 正则

本文链接：https://blog.csdn.net/yueyue____1/article/details/77531591

版权

注册界面实现双重认证专栏收录该内容

1 篇文章 0 订阅

订阅专栏

刚接触到easyui，对一些功能还不是很了解，下面附上实现的代码，以供大家参考！
基于jquery-easyui-1.4.2实现！

$.extend($.fn.validatebox.defaults.rules, {
    username_isExist: {
        validator: function (value) {
            var existsUserName = $('#loginName').textbox('options').existsUserName;
            if (existsUserName == null) {
                return true;
            } else {
                return false;
            }
        },
        message: '用户名已存在！'
    },
    loginName: {
        validator: function(value,param){
            //数字、字母、下划线，6-20长度
            var t = /^[a-zA-Z0-9_\u4e00-\u9fa5]{1,7}$/;
            //var t = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/;只能含有汉字、数字、字母、下划线  长度并没有限制
            return t.test(value);
        },
        message:'只能含有汉字、数字、字母、下划线,并且长度不能大于7位!'
    }
});
$(function() {
    $('#loginName').textbox({  
        onChange: function(newValue,oldValue) {
            if (!newValue) {
                $('#loginName').textbox('options').existsUserName = null;
                $('#loginName').textbox('validate');
            }

            $.post('${pageContext.request.contextPath}/Login/doCheckName.do', {
                'checkName' : newValue,
                },function(msg) {
                    var b = msg.success;
                    if (b == true) {
                        $('#loginName').textbox('options').existsUserName = null;
                    } else {
                        $('#loginName').textbox('options').existsUserName = newValue;
                    }
                    //2中写法$(edPonbr.target).textbox('options').existsInvNo = (b ? null : newValue);
                    $('#loginName').textbox('validate');
                }, 'JSON').error(function() {
            });
        }
    });
});

body的内容，用户名实现双重验证！

<div id="dlg_user" class="easyui-dialog" style="width:320px;" data-options="closable : false,
        title : '注册界面',
        modal : true,
        buttons : [ {
            text : '注册',
            handler : function() {
                doRegister();
            }
        },{
            text : '重置',
            handler : function() {
                doReset();
            }
        },{
            text : '返回',
            handler : function() {
                doReturn();
            }
        }]">
        <div style="padding:30px">
            <form id="frm_register" method="POST" data-options="novalidate:true" action="${pageContext.request.contextPath}/Login/doRegister.do">
                <table style='border-collapse: collapse; table-layout: fixed'>
                    <tr>
                    <td id="name">用户名:</td>
                    <td><input class="easyui-textbox" id="loginName" type="text" name="loginName" data-options="iconCls:'icon-man',required:true,validType:['loginName','username_isExist'],missingMessage:'请输入用户名'"/></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input class="easyui-textbox" id="password" type="password" name="password" data-options="iconCls:'icon-lock',required:true,validType:'password',missingMessage:'请输入密码'"/></td>
                </tr>
                <tr>
                    <td>重复密码:</td>
                    <td><input class="easyui-textbox" id="rePassWord" type="password" name="rePassWord" data-options="iconCls:'icon-lock',required:true,validType:'equalTo[\'#password\']', invalidMessage:'再次输入的密码不一致', missingMessage:'请再输入一次密码'"/></td>
                </tr>
                </table>
            </form>
        </div>
    </div>