步骤：
封装验证规则：
export function isvalidPhone(phone) {const reg = /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/return reg.test(phone)}
表单中定义验证：
<el-dialog title="新增用户" :visible.sync="dialogFormVisible"><el-form ref="ruleForm" :inline="true" :model="form" :rules="rules" size="small"><el-form-item label="电话" prop="phone"><el-input v-model.number="form.phone" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button size="mini" @click="dialogFormVisible = false">取 消</el-button><el-button size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button></div></el-dialog>
组件中引入封装好的验证规则：
import {isvalidPhone } from '@/utils/validate'
自定义验证：
data() {// 自定义验证const validPhone = (rule, value, callback) => {if (!value) {callback(new Error('请输入电话号码'))} else if (!isvalidPhone(value)) {//判断用户输入的值是否符合规则callback(new Error('请输入正确的11位手机号码'))} else {callback()}}return {dialogFormVisible: false,form: {phone: null},rules: {phone: [{required: true, trigger: 'blur', validator: validPhone } //写入验证器]}}}
点击按钮进行校验：
methods: {// 表单验证submitForm(formName) {this.$refs[formName].validate((valid) => {//重点是ref绑定必须一致if (valid) {alert('submit!')this.dialogFormVisible = false} else {console.log('error submit!!')return false}})}}
看效果：
电话号码为空时
电话号码格式错误时
后续会一直更新各种常见验证，关注一下了解更多。
