我們在項目中頭疼的是什么？對，你沒有聽錯，就是表單驗證，各種非空校驗，正則校驗等等

而初次使用element-ui，在做表單驗證的時候，由于項目急，自己呢，也沒有時間去研究這個，結果比別人多寫了500行的js，有木有很夸張，所以，這個項目結束了，自己呢，去研究了下rules的神奇之處若有不足，請指出來，謝謝大佬們

<template><div class="short-visit"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm" v-if="textFlag"><el-form-item label="姓名" prop="name" class="form-height"><el-inputv-model="ruleForm.name":class="nameClass? '':'active'":disabled="nameShell"@focus="nameFocus"maxlength="30"></el-input></el-form-item><el-form-item class="submitBtn"><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button></el-form-item></el-form ></div></div> </template>

我們就以這一個為例子

首先我們在el-form上面添加下面這三個屬性

:model="ruleForm" :rules="rules" ref="ruleForm" :model="ruleForm" 是綁定我們form表單中需要提交給后臺的一個對象 :rules="rules" 是動態綁定的rules，表單驗證規則 ref="ruleForm" 是我們綁定的對象

然后在每一個el-form-item上面綁定prop屬性，這個屬性就是我們下面要做正則校驗的地方，而下面所綁定的值，都是在ruleForm這個對象中，我們下面看具體的js代碼

export default {name: 'short-visit',data () {let missionPass = (rule, value, callback) => { //就是我們的回調函數，需要大家注意的是，這個沒有在return的對象中，在data中console.log(value)if (value.length > 1) {if (value.indexOf('參加會議') !== -1) {callback()} else {callback(new Error('當出訪任務為“參加會議”時才可進行多選，請重新勾選出訪任務'))}} else {callback()}}return {ruleForm: { // 存放數據的對象name: '', // 姓名},rules: { // 就是我們在el-form中綁定的rules，進行表單的驗證name: [ // 我們在el-form-item中綁定的prop，就是這里的name，需要大家注意，這具有唯一性{ required: true, message: '請輸入姓名', trigger: 'blur' } // require:是否必填，如不設置，則會根據校驗規則自動生成;message:是提示的內容；trigger：是什么事件觸發],MissionStatementType: [{ required: true, message: '請選擇具體的出訪任務', trigger: 'change' },{ validator: missionPass, trigger: 'change' } // validator:對整個表單進行校驗的方法，參數為一個回調函數。該回調函數會在校驗結束后被調用，并傳入兩個參數：是否校驗成功和未通過校驗的字段。若不傳入回調函數，則會返回一個 promise]}}},created () {/*** 可以放我們初次進入頁面的請求* */},methods: {/*** 數據的提交* */submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$confirm('是否確認提交', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning',center: true}).then(() => {/*** 發送ajax請求* */})}).catch(() => {/*** 點擊了取消按鈕*/})} else {return false}})}} }

上面的就是js的代碼，具體什么作用，我做了備注，謝謝大家

總結

以上是生活随笔為你收集整理的element-ui中表单验证rules的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。