介绍
element-ui表单中不可以输入纯数字的解决方法?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
& lt;输入类型=皌ext"类=癳l-input__inner"> & lt; template>
& lt; div类=癶ello"祝辞
& lt; el-form:模型=皉uleForm":规则=皉ules"ref=皉uleForm"label-width=?00 px"类=癲emo-ruleForm"比;
& lt; el-form-item标签=懊啤爸С?皀ame"比;
& lt; el-input v模型=皉uleForm.name"祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签=澳炅?支持=癮ge"比;
& lt; el-input v-model.number=皉uleForm.age"祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签=笆只拧爸С?皃hone"比;
& lt; el-input v-model.number=皉uleForm.phone"祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签=坝氏洹?支持=癳mail"比;
& lt; el-input v模型=皉uleForm.email"祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item>
& lt; el-button类型=皃rimary"@click=皊ubmitForm (& # 39; ruleForm& # 39;)“在立即创建& lt;/el-button>
& lt; el-button @click=皉esetForm (& # 39; ruleForm& # 39;)“在重置& lt;/el-button>
& lt;/el-form-item>
& lt;/el-form>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
名称:& # 39;helloworld # 39;
道具:{
},
数据(){//手机号验证
var checkPhone=(规则,价值,回调)=比;{
const phoneReg=/^ 1[3 | 4 | 5 | 6 | 7 | 8][0 - 9]{9}/美元
如果价值(!){
返回回调(新的错误(& # 39;电话号码不能为空& # 39;))
}
setTimeout(()=比;{
如果(! Number.isInteger (+)) {
回调(新的错误(& # 39;请输入数字值& # 39;))
其他}{
如果(phoneReg.test(值)){
回调()
其他}{
回调(新的错误(& # 39;电话号码格式不正确& # 39;))
}
}
},100)
};
返回{
ruleForm: {
名称:& # 39;& # 39;
电话:& # 39;& # 39;
电子邮件:& # 39;& # 39;
年龄:& # 39;& # 39;
},
规则:{
名称:[
{要求:真实,信息:& # 39;请输入姓名& # 39;,触发:& # 39;模糊# 39;},
{分钟:3,马克斯:5、消息:& # 39;长度在3到5个字符& # 39;,触发:& # 39;模糊# 39;}
]，
年龄:【
{要求:真实,信息:& # 39;请输入年龄& # 39;,触发:& # 39;模糊# 39;},
{类型:& # 39;数字# 39;,信息:& # 39;年龄必须为数字值& # 39;,触发:& # 39;模糊# 39;},
]，
电话:(
{要求:真的,验证器:checkPhone,触发:& # 39;模糊# 39;}
]，
电子邮件:(
{要求:真实,信息:& # 39;请输入邮箱地址& # 39;,触发:& # 39;模糊# 39;},
{类型:& # 39;电子邮件# 39;,信息:& # 39;请输入正确的邮箱地址& # 39;,触发:& # 39;模糊# 39;}
]
}
};
},
方法:{
submitForm (formName) {
美元。参考文献[formName] . validate((有效)=比;{
如果(有效){
警报(& # 39;提交! & # 39;);
其他}{
console.log(& # 39;错误! ! & # 39;);
返回错误;
}
});
},
resetForm (formName) {
美元。参考文献[formName] .resetFields ();
}
}
}
& lt;/script>
& lt;风格范围lang=皊css"祝辞
& lt;/style> 效果如下:
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。
