通過一個案例來示意：element的表單校驗

html部分：

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

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

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

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

? ? ? ? ? ? pattern 正則表達(dá)式，通過正則驗證值

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

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

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

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

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

總結(jié)

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

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