<el-form ref="formRef" inline label-width="100px" :model="formList" :rules="rules">
<el-form-item label="用户名" prop="Account">
<el-input v-model.trim="formList.Account" />
</el-form-item>
<el-form-item label="密码" prop="PassWord">
<el-input v-model.trim="formList.PassWord" type="password" maxlength="50" />
</el-form-item>
<el-form-item label="真实姓名" prop="RealName">
<el-input v-model.trim="formList.RealName" />
</el-form-item>
<el-form-item label="昵称" prop="NickName">
<el-input v-model.trim="formList.NickName" />
</el-form-item>
<el-form-item label="性别" prop="Gender">
<el-select v-model="formList.Gender" placeholder="选择性别">
<el-option v-for="(item, index) in sex" :key="index" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
<el-form-item label="身份证" prop="IDCardNo">
<el-input v-model.trim="formList.IDCardNo" maxlength="18" />
</el-form-item>
<el-form-item label="手机" prop="MobilePhone">
<el-input v-model.trim="formList.MobilePhone" maxlength="11" />
</el-form-item>
<el-form-item label="区划" prop="areacode">
<el-tree-select v-model="formList.areacode" :data="data" lazy :load="load" node-key="id" :props="props"
:render-after-expand="false" />
</el-form-item>
<div class="flex">
<el-form-item label="用户状态" prop="EnabledMark">
<el-switch v-model="formList.EnabledMark"></el-switch>
</el-form-item>
<el-form-item label="用户类型" prop="UserType">
<el-select v-model="formList.UserType" placeholder="选择用户类型">
<el-option v-for="(item, index) in dictionary" :key="index" :label="item.name" :value="item.field" />
</el-select>
</el-form-item>
</div>
<div>
<el-form-item label="主角色" prop="RoleId">
<el-checkbox-group v-model="formList.RoleId">
<el-checkbox v-for="role in roleList" :key="role" :label="role.value">
{{ role.name }}
</el-checkbox>
</el-checkbox-group>
</el-form-item>
</div>
<div class="remarks">
<el-form-item label="备注" prop="Description">
<el-input v-model="formList.Description" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"
type="textarea" />
</el-form-item>
</div>
</el-form>
这种方式需要在data()中写入rule{},将prop中需要校验的字段写上验证规则,示例代码如下:
//引入regular.js 需要哪个引入哪个
import { isPhone, isIdCard, isName, isPassword, isUsername, isDescription } from '@/utils/regular.js'
data(){
return{
rules: {
Account: [
{
required: true,
trigger: 'blur',
message: '请输入用户名',
},
{ validator: isUsername, trigger: 'blur' }
],
PassWord: [
{
required: true,
trigger: 'blur',
message: '请输入密码',
},
{ validator: isPassword, trigger: "blur" }
],
RealName: [
{
required: true,
trigger: 'blur',
message: '请输入真实姓名',
},
{ validator: isName, trigger: "blur" }
],
NickName: [
{
required: true,
trigger: 'blur',
message: '请输入昵称',
},
],
Gender: [
{
required: true,
trigger: 'change',
message: '请选择性别',
},
],
MobilePhone: [
{ required: true, trigger: 'blur', message: '请输入手机号' },
{ validator: isPhone, trigger: "blur" }
],
IDCardNo: [
{ validator: isIdCard, trigger: "blur" }
],
UserType: [
{
required: true,
trigger: 'change',
message: '请选择用户类型',
},
],
areacode: [
{
required: true,
trigger: 'change',
message: '请选择区划',
},
],
EnabledMark: [
{
required: true,
trigger: 'change',
message: '请输选择用户状态',
},
],
RoleId: [
{
required: true,
trigger: 'blur',
message: '请选择角色',
},
],
Description: [
{ validator: isDescription, trigger: 'blur' }
],
},
}
}
regular.js文件
// 校验手机号
export const isPhone = (rule, value, cb) => {
const regMobile = /^1\d{10}$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('请输入合法的手机号'))
}
// 校验身份证
export const isIdCard = (rule, value, cb) => {
const regMobile =
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('请输入合法的身份证'))
}
// 校验姓名
export const isName = (rule, value, cb) => {
const regMobile =
/^(([a-zA-Z+\.?\·?a-zA-Z+]{2,10}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,10}$))/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('请输入正确的姓名'))
}
// 校验密码
export const isPassword = (rule, value, cb) => {
const regMobile = /^[a-zA-Z]\w{0,50}$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('请输入正确的密码'))
}
// // 校验用户名
export const isUsername = (rule, value, cb) => {
const regMobile = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{2,10}$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('请输入正确的用户名'))
}
//备注
export const isDescription = (rule, value, cb) => {
const regMobile = /^[\u4e00-\u9fa5_a-zA-Z0-9_\^%&',;=?$/x22]{0,500}$/
if (regMobile.test(value)) {
return cb()
}
cb(new Error('备注长度为500'))
}