TIP

所有的表单元素必须放入 <div class="form-group"></div>

常规结构如下

<div class="form-group">
    <!-- 标题 -->
    <span class="title">默认文本框</span>
    <!-- 表单元素 -->
    <input type="text" placeholder="请输入你需要的内容">
</div>
1
2
3
4
5
6

# 输入框

# 默认输入框

<input type="text" placeholder="请输入你需要的内容">
1

# 禁用输入框

在input上增加 disabled 属性

<input type="text" placeholder="请输入你需要的内容" disabled>
1

# 带图标的输入框

在input上增加 data-icon 属性

<input type="text" placeholder="可以指定文本框的图标" data-icon="fa-user">
1

如果希望图标在右侧,则在图标后增加 |right

<input type="text" placeholder="可以指定文本框的图标" data-icon="fa-user|right">
1

# 有状态的输入框

在input上增加 data-model 属性,提供3中状态 success error notice

<!-- 正确 -->
<input data-model="success" type="text" placeholder="输入正确" value="输入正确">
<!-- 错误 -->
<input data-model="error" type="text" placeholder="输入错误" value="输入错误">
<!-- 提示 -->
<input data-model="notice" type="text" placeholder="输入提醒" value="输入提醒">
1
2
3
4
5
6

# 前方有固定文本

在input上增加 data-prepend 属性

<input type="text" placeholder="请输入网址" data-prepend="http://">
1

# 后方有固定文本

在input上增加 data-append 属性

<input type="text" placeholder="请输入省份" data-append="">
1

# 前后同时有固定文本

<input type="text" placeholder="请输入金额" data-prepend="$" data-append=".00">
1

# 有加减功能

在input上增加class num-inputdata-min 属性指定最小值,data-max 属性指定最大值,data-step 指定每次增加或减少的步长

<input class="num-input" type="text" value="0" data-min="0" data-max="10" data-step="1">
1

# 文本域

# 默认文本域

<textarea rows="6" placeholder="请输入内容..."></textarea>
1

# 禁用文本域

在textarea上增加 disabled 属性

<textarea rows="6" placeholder="请输入内容..." disabled></textarea>
1

# 禁止缩放的文本域

在textarea上增加 class no-resize

<textarea class="no-resize" rows="6" placeholder="禁止缩放的文本域"></textarea>
1

# 带字数限制的文本域

在textarea上增加 maxlength 属性

<textarea maxlength="20" rows="6" placeholder="最多可输入20个字..."></textarea>
1

# 单选按钮

TIP

单选按钮必须使用 label 包裹起来

# 默认单选按钮

<label>
    <input name="fruit" type="radio"> 橘子
</label>
1
2
3

# 默认选中

增加 checked 属性

<label>
    <input name="fruit" type="radio" checked> 橘子
</label>
1
2
3

# 禁用

增加 disabled 属性

<label>
    <input name="fruit" type="radio" disabled> 橘子
</label>
1
2
3

# 复选按钮

TIP

复选按钮必须使用 label 包裹起来

# 默认复选按钮

<label>
    <input name="fruit" type="checkbox"> 橘子
</label>
1
2
3

# 默认选中

增加 checked 属性

<label>
    <input name="fruit" type="checkbox" checked> 橘子
</label>
1
2
3

# 禁用

增加 disabled 属性

<label>
    <input name="fruit" type="checkbox" disabled> 橘子
</label>
1
2
3

# 下拉菜单

下拉菜单完全是原生HTML的写法,禁用增加 disabled 属性,选中增加 selected 属性

TIP

下拉菜单默认未选项的值必须和入口文件 conf.select_default_val 配置的值一致

<select name="demo" disabled>
    <option value="-999">请选择</option>
    <option value="1" selected>苹果</option>
    <option value="2">香蕉</option>
    <option value="3" disabled></option>
    <option value="4">橘子</option>
    <option value="5">西瓜</option>
</select>
1
2
3
4
5
6
7
8

# 自定义下拉菜单宽度

在select上增加 data-width 属性,支持百分比,默认是像素,如果设置为百分比在数字后加百分号即可,例如:data-width="80%"

<select name="fruit" data-width="80">
    <option value="-999">请选择</option>
    <option value="1">苹果</option>
    <option value="2">香蕉</option>
    <option value="3"></option>
    <option value="4">橘子</option>
    <option value="5">西瓜</option>
</select>
1
2
3
4
5
6
7
8

# 联动下拉菜单

联动菜单是后台中很常用的功能,在父菜单上增加 data-bind 属性绑定子菜单,必须是子菜单的ID,且ID不能重复,data-api 指向到子菜单数据接口,在父级菜单的值发生改变时会自动将值追加到 data-api 指向的接口地址后面,例如:data-api="child.php?type=",此时选择的父级菜单的值为1,那最终请求子菜单接口的接口地址将是 child.php?type=1

<!-- data-bind的值是子菜单的ID,data-api是调用数据的接口地址 -->
<select name="one" data-bind="child" data-api="fruit.php?type=">
    <option value="-999">请选择</option>
    <option value="1">水果</option>
    <option value="2">运动</option>
</select>
<!-- 子菜单的ID就是父级菜单data-bind绑定值 -->
<select id="child" name="two">
    <option value="-999">请选择</option>
</select>
1
2
3
4
5
6
7
8
9
10

# 上传

# API

Eadmin.upload

参数 说明 类型 默认值
dom 容器,例如:'#p1',仅支持ID级别的容器 string -
param 参数列表 object -

# param参数内容

参数 说明 类型 默认值
api 后端接口地址 string -
autoupload 是否自动上传 boolean true
maxsize 文件最大尺寸,单位KB number 5000
maxfile 最大图片数量,默认不限 number -
doc 允许的格式 string '.jpg, .gif, .png, .jpeg'
headers 与请求一起发送的header头 object {}
success 上传成功后的回调 function -
complete 上传全部完成后的回调 function -
<div id="p1" class="mt20"></div>

<script>
    (() => {
        Eadmin.upload('#p1', {
            // 后端接口地址,如果在入口文件中配置了 baseURL,则此处不需要写完整地址
            api : '/upload.php',
            // 是否自动上传
            autoupload : false,
            // 最大上传尺寸,单位KB
            maxsize : 5000,
            // 允许的格式
            doc : '.jpg, .png, .gif',
            // 同请求一起发送的header头信息
            headers : {},
            // 上传成功回调,注入一个参数为服务端的返回值
            success : (data) => {

            },
            // 全部上传完成后的回调
            complete : () => {

            }
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 开关

checkbox 上增加属性 data-model="switch" 就可以使普通的 checkbox 变成开关,选中时值为1,未选中时值为0

# 默认开关

<label>
    <input name="switch" type="checkbox" data-model="switch">
</label>
1
2
3

# 禁用开关

checkbox 上增加 disabled 属性即可禁用

<label>
    <input name="switch" type="checkbox" data-model="switch" disabled>
</label>
1
2
3

# 默认打开的开关

checkbox 上增加 checked 属性即可默认打开

<label>
    <input name="switch" type="checkbox" data-model="switch" checked>
</label>
1
2
3

# 滑块

滑块需要一个容器调用,一般是一个 div

# API

Eadmin.slider

参数 说明 类型 默认值
dom 容器,例如:'#p1', '.p1'等等 string -
param 参数列表 object -

# param参数内容

参数 说明 类型 默认值
value 默认值 number 0
disabled 是否禁用 boolean false
step 步长 number 0
min 最小值 number 0
max 最大值 number 100
tips 自定义提示 string -
change 数据变化时的回调 function -

# 默认滑块

<div class="form-group">
    <div id="p1"></div>
</div>
<script>
    (function(){
        Eadmin.slider('#p1');
    })();
</script>
1
2
3
4
5
6
7
8

# 有默认值的滑块

<div class="form-group">
    <div id="p1"></div>
</div>
<script>
    (function(){
        Eadmin.slider('#p1', {
            value : 10
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10

# 禁用滑块

<div class="form-group">
    <div id="p1"></div>
</div>
<script>
    (function(){
        Eadmin.slider('#p1', {
            disabled : true
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10

# 固定步长滑块

<div class="form-group">
    <div id="p1"></div>
</div>
<script>
    (function(){
        Eadmin.slider('#p1', {
            step : 10
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10

# 自定义最大最小值滑块

<div class="form-group">
    <div id="p1"></div>
</div>
<script>
    (function(){
        Eadmin.slider('#p1', {
            // 自定义最小值
            min : 10,
            // 自定义最大值
            max : 1000
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 自定义提示滑块

<div class="form-group">
    <div id="p1"></div>
</div>
<script>
    (function(){
        Eadmin.slider('#p1', {
            // 提示
            tips : '自定义提示:[val]'
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11

# 有回调的滑块

<div class="form-group">
    <div id="p1"></div>
</div>
<script>
    (function(){
        Eadmin.slider('#p1', {
            // 值发生改变后的回调
            change : (val) => {
                console.log(val);
            }
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 穿梭框

穿梭框需要一个容器,一般是一个 div

# API

Eadmin.transfer

参数 说明 类型 默认值
dom 容器,例如:'#p1', '.p1'等等 string -
param 参数列表 object -

# param参数内容

参数 说明 类型 默认值
data 数据源,可以直接赋值数组作为数据源,也可以调用远程数据源 object string
search 是否支持搜索 boolean false
width 自定义宽度,单位 px number -
height 自定义高度,单位 px number -

# data参数支持的字段

参数 说明 类型 默认值
name 数据源复选框名称,用于取值 string -
txt 显示的文本 string -
val 真实值 string -
checked 是否选中 boolean false
disabled 是否禁用 boolean false

# 默认穿梭框

<!-- 穿梭框容器 -->
<div id="p1"></div>
<script>
    (function(){
        // 定义数据源
        var data = [];
        for (var _i = 1; _i <= 10; _i++)
        {
            data.push({
                name : 'default',
                txt  : 'Content ' + _i,
                val  : _i,
                checked  : false,
                disabled : false
            });
        }
        Eadmin.transfer('#p1', {
            // 数据源
            data : data
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 支持搜索的穿梭框

<!-- 穿梭框容器 -->
<div id="p1"></div>
<script>
    (function(){
        // 定义数据源
        var data = [];
        for (var _i = 1; _i <= 10; _i++)
        {
            data.push({
                name : 'default',
                txt  : 'Content ' + _i,
                val  : _i,
                checked  : false,
                disabled : false
            });
        }
        Eadmin.transfer('#p1', {
            // 数据源
            data : data,
            // 搜索
            search : true
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 自定义宽高的穿梭框

<!-- 穿梭框容器 -->
<div id="p1"></div>
<script>
    (function(){
        // 定义数据源
        var data = [];
        for (var _i = 1; _i <= 10; _i++)
        {
            data.push({
                name : 'default',
                txt  : 'Content ' + _i,
                val  : _i,
                checked  : false,
                disabled : false
            });
        }
        Eadmin.transfer('#p1', {
            // 数据源
            data   : data,
            // 宽度
            width  : 300,
            // 高度
            height : 400
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 使用远程数据源的穿梭框

数据源接口地址的默认前缀在入口文件的 module.conf.http.baseURL 中配置,也可以直接输入完整地址

<!-- 穿梭框容器 -->
<div id="p1"></div>
<script>
    (function(){
        Eadmin.transfer('#p1', {
            // 数据源接口地址
            data : 'transfer.json'
        });
    })();
</script>
1
2
3
4
5
6
7
8
9
10

远程接口数据源的JSON格式必须与上例中本地的数据源一致

[
    {
        name : 'default',
        txt  : 'Content',
        val  : 1,
        checked  : false,
        disabled : false
    }
]
1
2
3
4
5
6
7
8
9

# 评分

评分需要一个容器,一般是一个 div

# API

Eadmin.rate

参数 说明 类型 默认值
dom 容器,例如:'#p1', '.p1'等等 string -
param 参数列表 object -

# param参数内容

参数 说明 类型 默认值
default 默认分值 number 0
disabled 是否禁用 boolean false
num 自定义分值 number 5
change 分值发生变化时的回调 function -

# 默认评分

<div id="p1"></div>
<script>
    Eadmin.rate('#p1');
</script>
1
2
3
4

# 有默认分数

<div id="p1"></div>
<script>
    Eadmin.rate('#p1', {
        default : 2
    });
</script>
1
2
3
4
5
6

# 禁用

<div id="p1"></div>
<script>
    Eadmin.rate('#p1', {
        disabled : true
    });
</script>
1
2
3
4
5
6

# 自定义分数

<div id="p1"></div>
<script>
    Eadmin.rate('#p1', {
        num : 10
    });
</script>
1
2
3
4
5
6

# 分数改变回调

<div id="p1"></div>
<script>
    Eadmin.rate('#p1', {
        change : (point) => {
            Eadmin.message.success({
                content : '选择了' + point + '星'
            });
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10

# 颜色选择

颜色选择需要一个容器,一般是一个 div

# API

Eadmin.colorpicker

参数 说明 类型 默认值
dom 容器,例如:'#p1', '.p1'等等 string -
param 参数列表 object -

# param参数内容

参数 说明 类型 默认值
bind 将选择的色值绑定到的隐藏域的名称 string -
color 自定义色值 array -
change 色值发生变化时的回调 function -

# 默认颜色选择器

<div id="p1"></div>
<script>
    Eadmin.colorpicker('#p1');
</script>
1
2
3
4

# 自定义色值的颜色选择器

<div id="p1"></div>
<script>
    Eadmin.colorpicker('#p1', {
        color : [
            '#000',
            '#CCC'
        ]
    });
</script>
1
2
3
4
5
6
7
8
9

# 绑定隐藏域

一般用于需要将选择的色值保存到数据库的时候,设置 bind 参数后会自动生成一个 name = bind 指定的值的隐藏域,用来提交表单,无需自行在 change 回调里再去处理

<div id="p1"></div>
<script>
    Eadmin.colorpicker('#p1', {
        bind : 'color'
    });
</script>
1
2
3
4
5
6

# 色值变化时的回调

<div id="p1"></div>
<script>
    Eadmin.colorpicker('#p1', {
        change : (color) => {
            Eadmin.message.info({
                content : '选择的色值是:' + color
            });
        }
    });
</script>
1
2
3
4
5
6
7
8
9
10

# 表单验证

在需要进行表单验证的表单元素上增加 data-validate 参数,可以指定验证规则,验证规则可以使用内置规则和自行定义正则表达式,增加 data-validate-msg 来指定错误提示信息

<form action="submit.php">
    <!-- 表单组盒子 -->
    <div class="form-group">
        <span class="title">文本框</span>
        <input name="t1" 
            type="text" 
            placeholder="请输入你需要的内容"
            data-validate="require|len=0-2|val=0-10"
            data-validate-msg="请输入内容|长度只能在0-2之间|取值只能在0-10之间"
        >
    </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12

# 内置规则说明

  • require:不能为空

  • mobile:手机号

  • phone:固定电话

  • email:邮箱

  • qq:QQ

  • idcard:身份证号码

  • url:网址

  • date:日期时间

  • money:金额

  • ip:IP地址

  • number:纯数字

  • letter:纯字母

  • numberLetter:数字和字母

  • zipcode:邮编

# 附加验证

len=n-n:长度范围

val=n-n:取值范围(仅适用于数字)

例如现在有一个文本框不允许为空,并且输入长度不能大于10,输入的值不能小于5,则写法如下

<input name="t1" 
    type="text" 
    placeholder="请输入你需要的内容"
    data-validate="require|len=-10|val=5-"
    data-validate-msg="请输入内容|长度只能不能大于10|取值不能小于5"
>
1
2
3
4
5
6

TIP

注意,如果是 selectradiocheckbox 则可以用到的规则只能是 require

checkboxradio 的规则写在同一组下的第一个元素上

<div class="form-group mt20">
    <span class="title">复选框</span>
    <label>
        <input name="t4" type="checkbox" value="1" data-validate="require" data-validate-msg="此项必须选择"> 香蕉
    </label>
    <label>
        <input name="t4" type="checkbox" value="2"> 橘子
    </label>
    <label>
        <input name="t4" type="checkbox" value="3"> 西瓜
    </label>
</div>
1
2
3
4
5
6
7
8
9
10
11
12