el-input-number(计数器)
input-number的特点是只允许输入数字,如果有max,min设置,用户输入的数字不在这个范围,或者是,我们需要给出用户一条提示信息,告诉用户输入不正确,而change
事件的触发条件是当输入的数字与其现有的数字不同时,才会触发此条件:
1. 用户输入统一数字不会触发change;
2. 用户输入的时数字,但是超出了范围,input-number会自动处理为最大,会最小值,此时会触发change,但是我们得不到用户输入的错误数据,由此并不能给出相应的错误提示。
3. 用户输入的格式不对,比如中文,英文,input-number会还原为原来的数,不会触发change,
内部自动处理了用户的错误的行为并吞没了该错误信息,但是我们需要根据根据用户的错误信息来进行提示。所以在需要给出错误提示的情况下input-number并不适用。
实验:codeopen input-number
字符串引起来的要想变成不是字符串那就要绑定,不然的话就是字符串处理了,如数字,boolean值需要绑定,而本身是字符串如label,small的描述就不用
<el-input-number
v-model="num"
@change="handleChange"
:min="0"
:max="10"
label="描述文字"
size="small"
:controls="false">
</el-input-number>
el-input(输入框)
为了获取用户输入的第一数据,我们需要的时输入框,在输入框的基础上,添加辅助功能,使其变成针对number的输入框。
1. input
事件,是当input值改变时,触发该事件,这使得我们能够及时关注用户的输入信息
2. 它的宽度我们可以通过style:="width: 80px;" 来控制
,或者外置一个容器设置宽度
3. el-input的内置内容居中:
codeopen实验:el-input输入框显示
/deep/ .el-input__inner{
text-align: center;
}
表达校验单行数据
需求:当用户输入的值不在效范围内,则给出提示,这涉及到校验,校验一般用el-form来进行
实验:jsfiddle必须填写与数字位数校验
1. el-form
进行表单检验时,1). 必须要传入一个表单对象(对象里面是要检验的数据)model
,以便在校验规则通过后,消除提示信息 2. 需要制定我们的校验规则对象rules
;(在这里我们只是想校验一个数据项,所以以$data来作为数据对象)
2. prop
为选定哪项检验规则来校验的数据
3. $data
代表的是我们的数据模型
实验:codeopen el-form校验单行数据
<!-- el-form 进行表单检验时,1. 必须要传入一个表单对象,以便在校验规则通过后,消除提示信息 2. 需要制定我们的校验规则对象-->
<el-form :model="$data" :inline="true" :rules="rules2" >
<!-- prop为适用哪项检验规则来校验下面的数据 -->
<el-form-item label="审批人" prop="user">
<!-- 要被是被为校验的数据,需要是在model中绑定的对象中,只有是属于绑定的对象数据的内容跟,才进行校验 -->
<el-input v-model="$data.user" placeholder="审批人"></el-input>
<span>{{user}}</span>
<!-- $data代表的是我们的数据模型 -->
<span>{{$data}}</span>
</el-form-item>
</el-form>
//------------一个校验规则下的多重校验---------------
data() {
return {
user: '',
rules2: {
checkUser:[
{
required: true,
message: '测试数字',
trigger: 'blur'
},
{
pattern: /^\d{18}$/,
message: '请输入18位纯数字',
trigger: 'blur'
}
]
}
}
}
正则表达式校验
{
// 1到7位整数校验
pattern: /^[0-9]\d{0,6}$/,
message: '请输入1到7位的整数'
}