快捷導(dǎo)航

關(guān)于ElementPlus中的表單驗證規(guī)則詳解

更新時間：2023年06月07日 17:18:29 作者：秋天code

這篇文章主要介紹了關(guān)于ElementPlus中的表單驗證,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

ElementPlus中的簡單校驗

ElementPlus的表單的一般結(jié)構(gòu)是：

<el-form>
	<el-form-item>
		<el-input/>
	</el-form-item>
</el-form>

ElementPlus中使用表單校驗規(guī)則：

在<script>中給出校驗規(guī)則對象，主要屬性名要與form對象的屬性名一致
一個字段的校驗規(guī)則可以有多個，值是一個數(shù)組，數(shù)組中的一個對象就是一條校驗規(guī)則

// 收集表單數(shù)據(jù)
const form = reactive({
  account: '',
  password: '',
  agree: false
})
// 定義校驗規(guī)則
// 可以為一個字段指定多條校驗規(guī)則
// 規(guī)則名稱與form表單字段一致
const rules = reactive({
  account: [
    // required是否必填,message不符合此規(guī)則時的提示信息,
    // trigger觸發(fā)此條規(guī)則校驗的時機，有兩個值, blur 或 change,默認(rèn)就是blur和change都會進行校驗
    // min此字段的最小長度，max此字段的最大長度
    // pattern 正則表達式
    { required: true, message: '賬戶不能為空', trigger: 'blur' },
    { min: 6, max: 14, message: '用戶名長度為6 - 14位' }
  ]
})

在模版中:

<el-form>中rules屬性綁定規(guī)則校驗對象
<el-form-item>中prop屬性綁定規(guī)則對象的某個字段

<!--
  :model 綁定表單對象
  :rules 綁定表單的校驗規(guī)則
-->
<el-form
  status-icon
  :model="form"
  :rules="rules"
>
  <!--
	label標(biāo)簽名
	prop屬性,指定校驗規(guī)則中的
  -->
  <el-form-item label="賬戶" prop="account">
	<!-- v-model將值收集到哪個變量中 -->
	<el-input v-model="form.account" />
  </el-form-item>
  <el-form-item label="密碼">
	<el-input v-model="form.password" />
  </el-form-item>
  <el-button size="large" class="subBtn">點擊登錄</el-button>
</el-form>

演示效果

自定義校驗規(guī)則

在<script>中的規(guī)則中，數(shù)組中的每一個對象都是一個校驗規(guī)則，我們只需要給一個對象給出validator()方法的實現(xiàn)即可:
該方法有三個參數(shù)：

validator(rule, value, callback){
	// rule此條規(guī)則的描述信息
	// value表單中此字段的值
	// 回調(diào)函數(shù),通過此函數(shù)控制是否校驗通過
}

看個例子

// 定義校驗規(guī)則
const rules = reactive({
// 普通的校驗規(guī)則
  account: [
    { required: true, message: '賬戶不能為空', trigger: 'blur' },
    { min: 6, max: 14, message: '用戶名長度為6 - 14位' }
  ],
  password: [
  // 自定義校驗規(guī)則
    {
      validator(rule, value, callback) {
        if (value[0] === '0') {
	      // 校驗不通過
          return callback(new Error('密碼字段的第一位不能是0'))
        } else {
          // 校驗通過
          callback()
        }
      }
    }
  ]
})

在模版中使用為字段使用此條校驗規(guī)則

<el-form
  :model="form"
  :rules="rules"
>
  <!--
	label標(biāo)簽名
	prop屬性,指定校驗規(guī)則中的
  -->
  <el-form-item label="賬戶" prop="account">
	<!-- v-model將值收集到哪個變量中 -->
	<el-input v-model="form.account" />
  </el-form-item>
  <el-form-item label="密碼" prop="password">
	<el-input v-model="form.password" />
  </el-form-item>
  <el-button size="large" class="subBtn">點擊登錄</el-button>
</el-form>

演示效果

表單統(tǒng)一校驗

如果用戶什么都不輸入，直接點擊登錄，那么每個字段的校驗規(guī)則是不生效的，因為此字段還沒有輸入。
為了避免用戶在不操作表單的情況下，直接提交表單，可以在用戶點擊提交按鈕后，對所有的字段重新激活一次校驗。
通過表單對象的一個方法validate()方法，對整個表單的所有內(nèi)容進行一次驗證。

form.validate(callback)

此方法接收一個回調(diào)函數(shù)，回調(diào)函數(shù)的第一個參數(shù)，是布爾類型，當(dāng)所有的校驗規(guī)則都通過時，此值是true，否則false
回調(diào)函數(shù)的第二個參數(shù)是校驗未通過的所有字段的數(shù)組
在form表單中通過ref屬性標(biāo)識一下

<el-form ref="formRef">
</el-form>

<script>部分

// 獲取form表單引用
const formRef = ref(null)
// 當(dāng)點擊登錄按鈕時的函數(shù)
const submit = () => {
  // 獲取到真正的表單元素
  formRef.value.validate((isValid, invalidFields) => {
    if (isValid) {
      // 表單所有元素驗證通過，可以提交了
      console.log('驗證通過')
    } else {
      console.log(invalidFields)
      console.log('驗證不通過,不能提交,請檢查')
    }
  })
}

到此這篇關(guān)于關(guān)于ElementPlus中的表單驗證的文章就介紹到這了,更多相關(guān)ElementPlus表單驗證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: