vue限制input内容为非空、数字，并且限制长度

vue限制input内容为非空、数字，并且限制长度

html

#prop 属性设置为需校验的字段名即可
#show-word-limit打开计数器 非必要
#maxlength="16" 限制输入内容长度最大为16位
<el-form-item label="测试" prop="code" class="el-col-md-11">
	<el-input v-model.number="form.code" show-word-limit maxlength="16"  placeholder="请输入16位数字编码" />
</el-form-item>

js

刚开始使用min max限制发现对数字无效，最后改为正则

#验证是否输入内容是否为数字html中input v-model加入.number修饰，不验证数字可以去掉
#pattern:/^\d{14,16}$/ 正则限制数字在14-16位之间 如果限制长度位16位 都输入16即可
rules: {
	code:[
			{ required: true, message: '编码不能为空'},//验证非空
			{ type: 'number', message: '编码必须为数字值'},//验证数字注意input中v-model加.number即v-model.number
			{ pattern:/^\d{14,16}$/, message: '编码长度在14-16位数字' }//验证数字长度位14-16位
        ]
	}