1.限制input框数据类型
复制代码
<el-form-item label="排序" :label-width="formLabelWidth">
<el-input
v-model.number="forms.sort"
autocomplete="off"
type="text"
:maxlength="10"
oninput="this.value = this.value.replace(/[^0-9]/g, '');"
/>
</el-form-item>
2.函数方式对应表单提交
rules: {
title: [
{ required: true, message: '请输入规则名称', trigger: 'blur' },
{ min: 0, max: 100, message: '长度在 0 到 100个字符', trigger: 'blur' }
],
freight: [
{ required: true, message: '请输入运费补贴', trigger: 'blur' },
{
type: 'number',
message: '运费补贴需大于等于0小于100000',
trigger: 'blur',
transform(value) {
if(value !== null && value !== '') { //value Input框内容
if (String(value).trim() === '' || Number(value) < 0 || Number(value) >100000) {
return false
}else{
return Number(value)
}
}else {
return null
}
}
}
]
},
//弹出框对应表单验证方式
submit(){
this.$ref.[from].validate((value)={
if(value){
let phoneReg=/^[1][3,4,5,7,8][0-9]{9}$/
if(!phoneReg.test(this.form.phone){
this.$message({
message:'请输入真确的手机号码'，
type:'warning'
})
return
}
//发送表单提交请求
}
})
}
//官网方式进行表单验
-
export default {
-
name:"",
-
// 验证手机 获取三个回调函数
-
let checkPhone = (rule, value, callback) => {
-
let reg = /^1[345789]\d{9}$/
-
if (!reg.test(value)) {
-
callback(new Error('请输入11位手机号'))
-
} else {
-
callback()
-
}
-
}
-
return{
-
rules: {
-
phone: [
-
{ required: true, message: '请输入手机号', trigger: 'blur' },
-
{ type: 'number', validator: checkPhone, message: '请输入11位有效手机号号码', trigger: ['blur', 'change'] }
-
-
},
-
}
-