示例：代碼在末尾 可以直接復制使用

一、基本屬性認知：

1. required: true 會有 * ， 但僅是觸發(fā)最后點擊提交按鈕時，校驗某一項位必填；與輸入事件或者選擇或者失焦時候 怎么校驗無關(guān) （這時候的校驗取決于是否寫了具體的校驗規(guī)則）
為false則提交時可不填(默認false) 但是同時取決于validator的callback()返回是空還是返回報錯提示

2. validator: 自定義校驗方法 需要聲明變量和錯誤提示
3. trigger: 觸發(fā)校驗方法
4. message: 錯誤提示
5.type：校驗的數(shù)據(jù)類型

6.自定義校驗方法 var isMobile = (rule, value, callback) => { }
return callback(new Error(‘錯誤提示信息’))
callback() 透過校驗

以下代碼可直接復制使用：

<template><div class="big_box"><div>采用 <a href="https://element.eleme.cn/#/zh-CN/component/form ">自定義校驗規(guī)則和表單驗證 案例</a> </div><el-form ref="formObj" :model="formObj" :status-icon="false" :rules="rules" label-width="100px" class="demo-ruleForm"><!-- :status-icon="false" 可以去除校驗后的對錯圖標 --><el-form-item label="活動名稱" prop="userName"><el-input v-model="formObj.userName" placeholder="required: true 加* 僅觸發(fā)點擊提交時必填，如不設置，則會根據(jù)校驗規(guī)則自動生成"></el-input></el-form-item><el-form-item prop="mobile" label="手機"><el-input v-model="formObj.mobile" placeholder="手機號可不填寫 但若填寫會校驗" maxlength="11" clearable></el-input></el-form-item><el-form-item prop="address" label="地址"><el-input v-model="formObj.address" placeholder="不校驗可以不寫校驗規(guī)則{ } 或者寫required: false 表示點擊提交不校驗是否填寫" clearable></el-input></el-form-item><el-form-item label="密碼" prop="pass"><el-input v-model="formObj.pass" type="password"></el-input></el-form-item><el-form-item label="確認密碼" prop="checkPass"><el-input v-model="formObj.checkPass" type="password"></el-input></el-form-item><el-form-item label="年齡" prop="age"><el-input v-model.number="formObj.age"></el-input></el-form-item><el-form-item label="車牌號碼" prop="carId"><el-input v-model.number="formObj.carId" placeholder="車牌號碼可不填寫 填寫檢驗格式 京AAAAAA 京A9999警 自動轉(zhuǎn)換大小寫和I O" @change="changeCar"></el-input></el-form-item><el-form-item label="活動區(qū)域" prop="region"><el-select v-model="formObj.region" style="width:100%;" clearable placeholder="請選擇活動區(qū)域"><el-option label="區(qū)域一" value="shanghai"></el-option><el-option label="區(qū)域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動性質(zhì)" prop="sport"><el-checkbox-group v-model="formObj.sport"><el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox><el-checkbox label="地推活動" name="type"></el-checkbox><el-checkbox label="單純品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item><el-button type="primary" @click="submitForm('formObj')">提交</el-button><el-button @click="resetForm('formObj')">重置</el-button></el-form-item></el-form></div> </template><script> export default {data () {var isMobile = (rule, value, callback) => {if (!value) {// return callback(new Error('請輸入電話號碼'))//這個是必須填寫callback()// 這個是可 不填寫} else {const reg = /^\d{11}$/const isPhone = reg.test(value)value = Number(value) // 轉(zhuǎn)換為數(shù)字if (typeof value === 'number' && !isNaN(value)) {// 判斷是否為數(shù)字value = value.toString() // 轉(zhuǎn)換成字符串if (value.length < 0 || value.length > 12 || !isPhone) {// 判斷是否為11位手機號callback(new Error('請輸入11位手機號碼'))} else {callback()}} else {callback(new Error('請輸入正確手機號碼'))}}}var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('請輸入密碼'))} else {if (this.formObj.checkPass !== '') {// 觸發(fā)部分表單字段進行校驗的方法 例如通過 密碼pass 失焦 來觸發(fā)檢驗 確認密碼checkPass 的校驗this.$refs.formObj.validateField('checkPass')}callback()}}var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('請再次輸入密碼'))} else if (value !== this.formObj.pass) {callback(new Error('兩次輸入密碼不一致!'))} else {callback()}}var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年齡不能為空')) // 打開這個就是必填// callback()// 打開這個就是非必填}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('請輸入數(shù)字值'))} else {if (value < 18) {callback(new Error('必須年滿18歲'))} else {callback()}}}, 10)}var checkCar = (rule, value, callback) => {if (!value) {return callback()} else {var result = falseif (value.length === 7) {// 車牌是7位時候規(guī)則為： 省份簡稱或大寫字母共1位+大寫字母共1位+大寫字母或者數(shù)字共4位+大寫字母或數(shù)字或特殊漢字1位 例如:AAAAAAA 京A9999警var express = /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學警港澳]{1}$/result = express.test(value) // 滿足條件時候 正則結(jié)果是true} else if (value.length === 8) {// 8位的為新能源汽車規(guī)則var express2 = /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{5}[A-Z0-9掛學警港澳]{1}$/// var express3 = /^[京津滬渝冀豫云遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陜吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/// 查看新能源車的具體規(guī)則其實需要用到express3匹配更精準 https://blog.csdn.net/tangjili5620/article/details/77159453result = express2.test(value)}if (result) {callback()} else {callback(new Error('請輸入正確車牌號碼'))}return result}}return {formObj: {userName: '',mobile: '',address: '',pass: '',checkPass: '',age: '',carId: '',region: '',sport: []},rules: {// required: true 會有* 僅觸發(fā)點擊提交時必填 為false則提交時可不填(默認false) 但是同時取決于validator的callback()返回是空還是返回報錯提示(例如 checkAge )// 與輸入事件或者選擇或者失焦時候 怎么校驗無關(guān) （這時候的校驗取決于是否寫了具體的校驗規(guī)則）userName: [{ required: true, message: '請輸入活動名稱', trigger: 'blur' },{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }],mobile: [{ validator: isMobile, trigger: 'blur' }], // validator 自定義校驗方法address: [{}], // 地址不校驗可以不寫 或者寫required: false 表示點擊提交不校驗是否填寫pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }],carId: [{ validator: checkCar, trigger: 'change' }],region: [{ required: true, message: '請選擇活動區(qū)域', trigger: 'change' }],sport: [{ type: 'array', required: true, message: '請至少選擇一個活動性質(zhì)', trigger: 'change' }]// 校驗的字段類型}}},methods: {// 將車牌輸入的小寫改成大寫 車牌的I和O改成1和0changeCar (val) {let str = val.toUpperCase().replace(/I/g, '1').replace(/O/g, '0')this.formObj.carId = str},submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!')} else {console.log('error submit!!')return false}})},resetForm (formName) {this.$refs[formName].resetFields()}} } </script> <style lang="less" scope> .big_box {width: 100%;.demo-ruleForm {width: 700px;margin-left: -webkit-calc(~'50vw - 350px');margin-left: -moz-calc(~'50vw - 350px');margin-left: calc(~'50vw - 350px');.el-checkbox-group {text-align: left;}} } </style>

總結(jié)

以上是生活随笔為你收集整理的element-ui的表单校验；el-form表单校验；el-form表单自定义校验；手机号校验；车牌号校验；车牌号正则校验；的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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