-
-
908791215 数据达人Lv4
发表于2019-12-17 14:04
楼主
本帖最后由 908791215 于 2019-12-17 14:08 编辑
1.1 预先写好一个登录门户（错误提示面板这里使用简单面板，其他容器也可以），如下图示例所示。
1.2 修改用户名、密码、错误面板、登录按钮这四个组件的组件标志名称。
1.用户名输入框：loginUser
2.密码输入框：loginPwd
3.错误面板：loginError
4.登录按钮：loginButton
举例：第三个错误面板的组件标志修改，如下图所示。（备注：其他三个和这个修改方式一样）
1.3 在page结构上加入验证登录的脚本，脚本列表已有默认的登录脚本，左下角选择即可。
1.设置登录加载完成事件。
2.设置自定义脚本事件，如上图所示，选择登录自定义脚本即可。
1.4 最后设置自定义的登录页，即可完成使用自定义登录页面登录。）
1.5 加入验证码功能。（按需要增加）
（1）在密码下方拖入一个单行输入框，用于输入验证码，并且将输入框组件标识设置成 ：loginVerify，如下图所示。(背景颜色及大小自己按照需求调整)
组件标识内容：loginVerify
（2）在验证码输入框的右侧加入图片组件，用于展示图片验证码，并且将图片组件标识设置成 ：vcode_img，如下图所示。
组件标识内容：vcode_img
图片地址内容：../../eacl/verifycode.do
事件—鼠标点击脚本内容：reLoadVerify();
（3）加入点击更换按钮，拖入一个链接即可，然后设置事件—鼠标点击脚本，如下图所示。（字体颜色、大小自己调整）
事件—鼠标点击脚本内容：reLoadVerify();
（4）在page结构上开放验证码功能脚本，如下图所示。）
加载完成脚本代码：
复制代码
[size=13.3333px] 自定义脚本代码：
复制代码
（5）这样即可完成自定义增加验证码功能，自定义效果如下图所示。（注：点击验证码图片也可以换一张验证码）
1.1 预先写好一个登录门户（错误提示面板这里使用简单面板，其他容器也可以），如下图示例所示。
1.2 修改用户名、密码、错误面板、登录按钮这四个组件的组件标志名称。
1.用户名输入框：loginUser
2.密码输入框：loginPwd
3.错误面板：loginError
4.登录按钮：loginButton
举例：第三个错误面板的组件标志修改，如下图所示。（备注：其他三个和这个修改方式一样）
1.3 在page结构上加入验证登录的脚本，脚本列表已有默认的登录脚本，左下角选择即可。
1.设置登录加载完成事件。
2.设置自定义脚本事件，如上图所示，选择登录自定义脚本即可。
1.4 最后设置自定义的登录页，即可完成使用自定义登录页面登录。）
1.5 加入验证码功能。（按需要增加）
（1）在密码下方拖入一个单行输入框，用于输入验证码，并且将输入框组件标识设置成 ：loginVerify，如下图所示。(背景颜色及大小自己按照需求调整)
组件标识内容：loginVerify
（2）在验证码输入框的右侧加入图片组件，用于展示图片验证码，并且将图片组件标识设置成 ：vcode_img，如下图所示。
组件标识内容：vcode_img
图片地址内容：../../eacl/verifycode.do
事件—鼠标点击脚本内容：reLoadVerify();
（3）加入点击更换按钮，拖入一个链接即可，然后设置事件—鼠标点击脚本，如下图所示。（字体颜色、大小自己调整）
事件—鼠标点击脚本内容：reLoadVerify();
（4）在page结构上开放验证码功能脚本，如下图所示。）
加载完成脚本代码：
- getElement = function(nms) {
- var obj = $p.$(nms);
- return obj.get("input") || obj.get("widget_div");
- };
- //重写这个检查DOM的方法，因为该方法会更改用户名和密码框的样式
- _validateLoginElements = function(){
- login_user = getElement("loginUser");
- login_pwd = getElement("loginPwd");
- login_bt = getElement("loginButton");
- login_error = getElement("loginError");
- login_error.className += ' form_point';
- //login_verify = null;//暂时不要验证码功能
- login_verify = getElement("loginVerify");
- _errortimes = 0;
- _verifycode = 0;
- };
- setupLoginForm();
[size=13.3333px] 自定义脚本代码：
- var contextpath = EUI.sys.getContextPath();
- EUI.include(contextpath + 'eacl/login/login.js');
- EUI.include('eui/third/md5.js');
- function showLoginErrorImpl(errormsg){
- var ediv = getElement(["loginError"]);
- if(!ediv) return;
- ediv.innerHTML = '';
- ediv.appendChild(doc.createElement("span"));
- ediv.appendChild(doc.createTextNode(errormsg));
- ediv.style.display = "block";
- reLoadVerify();
-
- }
- function reLoadVerify(){
- var verifycodeurl = EUI.getContextPath() + "eacl/verifycode.do";
- var div = getElement(["vcode_img"]);
- var img = div.firstElementChild;
- if(img){
- img.src = verifycodeurl + "?timestamp=" + new Date().getTime();
- }
- }
（5）这样即可完成自定义增加验证码功能，自定义效果如下图所示。（注：点击验证码图片也可以换一张验证码）
最近看过此主题的会员
5个回答
请教下是不是 用户名输入框组件标识设置为loginUser，密码输入框设置为loginPwd，登录按钮组件标识设置为loginButton 然后再按照步骤1.3加上页面的加载完成和自定义脚本保存 就可以完成一个自定义登录页面了？？目前我是按照以上步骤设置的 但是预览报错，如图
若出现验证码输入错误也能登陆的情况，是因为密码等级是低，不会进行验证码校验的。
所以将密码强度改成自定义并勾选错误时出现验证码
缱绻 发表于 2019-12-21 12:46
请教下是不是 用户名输入框组件标识设置为loginUser，密码输入框设置为loginPwd，登录按钮组件标识设置为lo ...
解决了吗,现在这个报错我也存在
