那个表单自带的规则就很简单,设置一下参数就可以了。这个自定义规则就让我吃了很久的亏,我都想放弃这个验证了,后面查阅了很多,算是解决了。
element-ui 的代码段
<!-- 主体区 -->
<el-form
label-width="70px"
:model="formLabelAlign"
style="max-width: 460px"
:rules="rule"
ref="addref"
>
<el-form-item label="用户名" prop="username">
<el-input v-model="formLabelAlign.username" />
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="formLabelAlign.password" />
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formLabelAlign.email" />
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="formLabelAlign.mobile" />
</el-form-item>
</el-form>
<!-- 底部区 -->
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="adduser"
>确认</el-button
>
</span>
</template>
自定义规则 和 验证规则(为什么要这样写,因为这是有顺序的,不然就没效果,先自定义规则,再验证规则)
export default {
setup () {
const state = reactive({
})
// 自定义验证规则,然后再添加进去
// 验证邮箱
var checkemail=(rule,value,callback)=>{
// 验证邮箱的表达式
const regemail=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
// 如果返回true
if(regemail.test(value)){
// 合法的邮箱
return callback()
}
callback(new Error('请输入合法的邮箱,包含@'))
}
// 验证手机
var checkmobile=(rule,value,callback)=>{
const regMobile=/^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57]) [0-9]{8}$/
if(regMobile.test(value)){
return callback()
}
callback(new Error('请输入合法的手机号'))
}
// 验证规则
const rule={
username:[
{required:true,message:'请输入用户名',trigger:'blur'},
{min:3,max:8,message:'请输入3-8位字符长度',trigger:'blur'}
],
password:[
{required:true,message:'请输入密码',trigger:'blur'},
{min:6,max:13,message:'请输入6-13位密码长度',trigger:'blur'}
],
email:[
{required:true,message:'请输入邮箱',trigger:'blur'},
{validator:checkemail,trigger:'blur'}
],
mobile:[
{required:true,message:'请输入手机号',trigger:'blur'},
{validator:checkmobile,trigger:'blur'}
]
}
return {
...toRefs(state),rule
}
}
}
记得把rule返回出去,就是加到return里面
花了我几天时间,希望点个赞支持一下吧~