mui dialog 输入框验证

需求： 用户输入账号密码，验证通过后才可以关闭prompt

需求分析： 

1. 首先dialog框中可以绘制html代码；
2. 再者就是可以获取input框里面的值再进行校对；
3. 最后通过验证就关闭dialog,否则不关闭并提示错误信息

实现思路：

dialog

  mui提供了很多dialog, 只有mui.prompt()提供了输入框，可以用这个做

  mui.confirm()的message参数，可以传html代码段来展示密码框，也可以用这种方法

回调函数

  由于当前版本的mui, 点击dialog中的按钮均会关闭dialog，所以需要对dialog按钮的默认行为进行修改。

验证

  对用户输入的value值进行验证，如果验证失败，提示错误信息

功能实现

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

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

  用户输入完成后，点击“确认”，验证信息

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;
    }
});

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

另一种方法是使用mui.prompt，具体方法可以查看上一章内容

mui.prompt('包裹', '', '包裹信息',['取消', '确定'], function(e) {
	if(e.index == 1) {
			weight = mui("#weight")[0].value;
		    price  = mui("#price")[0].value;
			var reg = /^[0-9]{1,6}$/
			if(reg.test(weight)){
				packageInfo(orderNo,weight,price);
			} else {
				mui.toast('格式错误',{ duration:'short', type:'div' }) 
					return false;
				}
			}
		},'div');
var g = '<input type="text" placeholder="请输入重量(g)" id="weight"/><input type="number" id="price" placeholder="填入价格(元)"/></div>';
				
var dom = $(".mui-popup-input").append(g);