【示例】 Mui v3.3.0使用dialog实现密码的输入及验证

需求描述

使用dialog弹出密码输入框，用户输入密码并且密码验证通过后方可关闭dialog。

需求分析

首先，dialog中提供密码输入框。
其次，用户输入密码后对密码进行验证。
最后，通过验证则关闭dialog，否则不关闭dialog并提示错误信息。

实现思路

dialog

mui提供了许多dialog，只有mui.prompt()提供了输入框，但它并不是密码框。
mui.confirm()的message参数，可以传html代码段来展示密码框，就选它了。

回调函数

由于当前版本mui，点击dialog中的按钮均会关闭dialog，所以需要对dialog按钮的默认行为进行修改。
注：下个版本会更新此修改，目前需要的话请下载附件中的mui.js文件。

验证密码

对用户输入的密码进行验证后，如果验证失败，则需要做出相应的提示。
和密码框的思路一样，使用一个文本内容默认为空的元素来展示错误信息。

功能实现

密码输入框

使用mui.confirm()弹出密码输入框。

mui.confirm('<input type="password" id="test" />', 'Hello MUI', null, function(e) {},'div');  

注：这里需要声明使用H5模式的dialog，参考文档dialog。

阻止关闭dialog

用户输入完成后，点击”确认“按钮，验证密码。

mui.confirm('<input type="password" id="test" />', 'Hello MUI', null, function(event) {  
    var index = event.index;  
    if(index === 1) {  
        var pwd = document.getElementById('test').value;  
        // 验证失败返回false  
        return false;  
    }  
},'div');  

修改按钮的默认行为后，在回调函数中返回false，则不会关闭dialog。

错误信息

在拼接密码输入框的同时，见错误信息提示的元素一起拼接。

mui.confirm('<input type="password" id="test" /><span id="error">&nbsp</span>', 'Hello MUI', null, function(event) {},'div');  

源码

附上源码，直接浏览即可。