mui 之 表单

说明

所有包裹在 mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。 将 label 元素和上述控件控件包裹在mui-input-group中可以获得最好的排列。

官方说明：https://dev.dcloud.net.cn/mui/ui/#input

相应代码块 mform、minput

注意

mui在mui.init()中会自动初始化基本控件,但是 动态添加的 Input组件 需要重新进行初始化

// 实例
mui('.mui-input-row input').input();

结构实例

<!-- mui-input-group 包裹 -->
<form class="mui-input-group">

    <!-- 每一行 mui-input-row 包裹-->
    <div class="mui-input-row">
        <label>输入框</label>
        <input type="text" placeholder="请输入">
    </div>

    <div class="mui-input-row">
        <label>输入框</label>
        <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
    </div>
</form>

带有清除的输入框

在 input控件上添加mui-input-clear类

<form class="mui-input-group">

    <div class="mui-input-row">
        <label>快速删除</label>
        <input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
    </div>

</form>

密码框

给input 元素添加mui-input-password类即可使用

<form class="mui-input-group">

    <!-- 密码框 -->
    <div class="mui-input-row">
        <label>密码框</label>
        <input type="text" class="mui-input-password" placeholder="请输入">
    </div>

</form>

搜索框

搜索框：在mui-input-row 同级添加 mui-input-search 类，就可以使用search控件

<form class="mui-input-group">
    <!-- 搜索框 -->
    <div class="mui-input-row mui-search">
        <input type="search" class="mui-input-clear" placeholder="搜索框">
    </div>

</form>

表单校验

HTML 代码

<form class="mui-input-group">

    <!-- 表单校验 -->
    <div id="input_example" class="mui-input-group">
        <div class="mui-input-row">
            <label>用户名：</label>
            <input type="text" class="mui-input-clear" placeholder="请输入用户名">
        </div>
        <div class="mui-input-row">
            <label>密码：</label>
            <input type="password" class="mui-input-clear mui-input-password" placeholder="请输入密码">
        </div>
        <div class="mui-button-row">
            <button type="button" class="mui-btn mui-btn-primary" id="input_check">验证</button>
        </div>
    </div>

</form>

Js 校验代码

<script type="text/javascript">
// 绑定点击事件
document.getElementById("input_check").addEventListener('click', function() {
    // 校验结果
    var check = true;
    // 使用 each() 方法校验
    mui("#input_example input").each(function() {
        //若当前input为空，则alert提醒 
        if(!this.value || this.value.trim() == "") {
            // 获取兄弟元素
            var label = this.previousElementSibling;
            mui.alert(label.innerText + "不允许为空");
            check = false;
            return false;
        }
    }); //校验通过，继续执行业务逻辑 
    check && mui.alert('验证通过!')
})
</script>

注意

注：始终为 button 按钮添加 type 属性，若button按钮没有type属性，浏览器默认按照type="submit"逻辑处理， 这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。