快捷導(dǎo)航

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

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

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

ElementPlus中的簡(jiǎn)單校驗(yàn)

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

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

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

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

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

在模版中:

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

<!--
  :model 綁定表單對(duì)象
  :rules 綁定表單的校驗(yàn)規(guī)則
-->
<el-form
  status-icon
  :model="form"
  :rules="rules"
>
  <!--
	label標(biāo)簽名
	prop屬性,指定校驗(yàn)規(guī)則中的
  -->
  <el-form-item label="賬戶(hù)" prop="account">
	<!-- v-model將值收集到哪個(gè)變量中 -->
	<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">點(diǎn)擊登錄</el-button>
</el-form>

演示效果

自定義校驗(yàn)規(guī)則

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

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

看個(gè)例子

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

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

<el-form
  :model="form"
  :rules="rules"
>
  <!--
	label標(biāo)簽名
	prop屬性,指定校驗(yàn)規(guī)則中的
  -->
  <el-form-item label="賬戶(hù)" prop="account">
	<!-- v-model將值收集到哪個(gè)變量中 -->
	<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">點(diǎn)擊登錄</el-button>
</el-form>

演示效果

表單統(tǒng)一校驗(yàn)

如果用戶(hù)什么都不輸入，直接點(diǎn)擊登錄，那么每個(gè)字段的校驗(yàn)規(guī)則是不生效的，因?yàn)榇俗侄芜€沒(méi)有輸入。
為了避免用戶(hù)在不操作表單的情況下，直接提交表單，可以在用戶(hù)點(diǎn)擊提交按鈕后，對(duì)所有的字段重新激活一次校驗(yàn)。
通過(guò)表單對(duì)象的一個(gè)方法validate()方法，對(duì)整個(gè)表單的所有內(nèi)容進(jìn)行一次驗(yàn)證。

form.validate(callback)

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

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

<script>部分

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

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

您可能感興趣的文章: