需求：輸入超過規(guī)定長度error提醒，并實時顯示輸入長度，可無限輸入
步驟：
我的項目中使用校驗比較多，所以進(jìn)行簡單的封裝：
新建js文件寫入下面的函數(shù)
export function valieTextLength(rule, value, callback) {
if (!value) {
callback()
return
}
const field = rule.field
const textLengthRules = {
name: 120,
code: 60,
accountPeriod: 20,
bankName: 60,
bankAccount: 19,
taxId: 20,
contacts: 60,
address: 160,
remark: 200,
tepName: 80 // 權(quán)限模板名稱
}
if (textLengthRules[field] && value.length > textLengthRules[field]) {
callback(new Error(`${value.length}/${textLengthRules[field]} 內(nèi)容輸入超出范圍`))
return
}
callback()
}
需要校驗的組件引用使用：
import { valieTextLength } from '@/utils/validate'
data中定義：
data() {
const valied = (rule, value, callback) => { valieTextLength(rule, value, callback) }
return {
rules: {
name: [ //這里做了三種校驗
{ required: true, message: '請輸入客戶名稱', trigger: 'blur' },
{
pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
message: '不支持特殊字符',
trigger: 'blur'
},
{ validator: valied }
]
}
}
}
form表單中prop要和rules中定義校驗名一致：
<el-form
ref="form"
class="customer-form"
:model="form"
label-width="85px"
:inline="true"
:rules="rules"
label-suffix=":"
>
<el-form-item label="客戶名稱" prop="name" class="form-style">
<el-input v-model.trim="form.name" placeholder="請輸入" size="small" class="input-style" />
</el-form-item>
</el-form>
看效果：
文章來源：http://www.zghlxwxcb.cn/news/detail-604223.html
可以看到我們自定義name長度為120，當(dāng)用戶輸入超過120會出現(xiàn)error提示，并實時顯示用戶輸入的字符長度，可以無限輸入但是無法通過校驗。文章來源地址http://www.zghlxwxcb.cn/news/detail-604223.html
到了這里，關(guān)于VUE element-ui之form表單中input輸入超過規(guī)定長度error提醒，并實時顯示輸入長度，可無限輸入的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[vue+element-ui] form中輸入框無法輸入問題的解決方法](https://imgs.yssmx.com/Uploads/2024/02/782003-1.png)
