通過(guò)一個(gè)案例來(lái)示意：element的表單校驗(yàn)

html部分：

<template><div id="app"><el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><!-- 設(shè)置prop屬性 （校驗(yàn)誰(shuí)寫(xiě)誰(shuí)的字段 ） --><el-form-item label="密碼" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="數(shù)字" prop="num"><el-input type="text" v-model="ruleForm.num" autocomplete="off"></el-input></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model.number="ruleForm.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div> </template>

js 部分：

export default {data(){var quYu = (rule, value, callback) => { // 數(shù)字校驗(yàn)if (value.length == 0) {return callback(new Error("數(shù)值不能為空，沒(méi)有請(qǐng)?zhí)?"));}if (value < 0) {return callback(new Error("數(shù)值不能為負(fù)數(shù)"));}if (!(/^[-+]?\d+$/).test(value)) {return callback(new Error("請(qǐng)輸入正整數(shù)或0"));}if (value.length > 9) {callback(new Error("數(shù)值長(zhǎng)度不能超過(guò)9個(gè)字符"));} else {callback();}};return {ruleForm:{ // 先在data中定義el-form 中model綁定的值pass:'',num:'',age:''},rules: { // 進(jìn)行表單校驗(yàn) /* required 如果為true，表示該字段為必填message 當(dāng)不滿(mǎn)足設(shè)置的規(guī)則時(shí)的提示信息pattern 正則表達(dá)式，通過(guò)正則驗(yàn)證值min 當(dāng)值為字符串時(shí)，min表示字符串的最小長(zhǎng)度，當(dāng)值為數(shù)字時(shí)，min表示數(shù)字的最小值max 當(dāng)值為字符串時(shí)，max表示字符串的最大長(zhǎng)度，當(dāng)值為數(shù)字時(shí)，max表示數(shù)字的最大值trigger 校驗(yàn)的觸發(fā)方式，change（值改變） / blur （失去焦點(diǎn)）兩種，validator 如果配置型的校驗(yàn)規(guī)則不滿(mǎn)足你的需求，你可以通過(guò)自定義函數(shù)來(lái)完成校驗(yàn)validator是一個(gè)函數(shù), 其中有三個(gè)參數(shù) (rule(當(dāng)前規(guī)則),value(當(dāng)前值),callback(回調(diào)函數(shù)))*/pass: [{ required: true, message: '請(qǐng)輸入密碼', trigger: 'blur' },{ min: 3, max: 5, message: '長(zhǎng)度在 3 到 5 個(gè)字符', trigger: 'blur' }],num: [{validator:quYu, trigger: 'change' }// validator自定義校驗(yàn)的規(guī)則],age: [{ type: 'date', required: true, message: '年齡', trigger: 'blur' },{ pattern: /^([0]|[1-9][0-9]*)$/, message: "請(qǐng)輸入0或正整數(shù)", trigger: ['blur', 'change'] } // pattern通過(guò)正則表達(dá)式驗(yàn)證值],}}},};

表單校驗(yàn)的相關(guān)屬性：

? ? ? ? ? ? required ?如果為true，表示該字段為必填

? ? ? ? ? ? message 當(dāng)不滿(mǎn)足設(shè)置的規(guī)則時(shí)的提示信息

? ? ? ? ? ? pattern 正則表達(dá)式，通過(guò)正則驗(yàn)證值

? ? ? ? ? ? min 當(dāng)值為字符串時(shí)，min表示字符串的最小長(zhǎng)度，當(dāng)值為數(shù)字時(shí)，min表示數(shù)字的最小值

? ? ? ? ? ? max 當(dāng)值為字符串時(shí)，max表示字符串的最大長(zhǎng)度，當(dāng)值為數(shù)字時(shí)，max表示數(shù)字的最大值

? ? ? ? ? ? trigger 校驗(yàn)的觸發(fā)方式，change（值改變） / blur （失去焦點(diǎn)）兩種，

? ? ? ? ? ? validator 如果配置型的校驗(yàn)規(guī)則不滿(mǎn)足你的需求，你可以通過(guò)自定義函數(shù)來(lái)完成校驗(yàn)

? ? ? ? ? ? validator是一個(gè)函數(shù), 其中有三個(gè)參數(shù) (rule(當(dāng)前規(guī)則),value(當(dāng)前值),callback(回調(diào)函數(shù)))

總結(jié)

以上是生活随笔為你收集整理的element表单校验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。