Vue样式代码:
<el-dialog title="用户信息"
:visible.sync="adddialogVisible"
width="30%">
<el-form :model="addForm"
:rules="addFormRules"
ref="addFormRef"
label-width="80px">
<el-form-item label="用户名"
prop="userName">
<el-input v-model="addForm.userName"></el-input>
</el-form-item>
<el-form-item label="密码"
prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱"
prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机号"
prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
js代码:因为用户名和密码Element官网有验证规则直接cv就完事了
// 验证邮箱
var checkEmail = (rule, value, callback) => {
const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
if (regEmail.test(value)) {
return callback()
}
callback(new Error('请输入合法邮箱'))
}
// 验证手机号
var checkMobile = (rule, value, callback) => {
const regMobile = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
if (regMobile.test(value)) {
return callback()
}
callback(new Error('请输入正确手机号'))
}
// 添加用户表单数据
addForm: {
userName: '',
password: '',
email: '',
mobile: ''
},
// 添加用户表单验证规则对象
addFormRules: {
userName: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 6, message: '长度在 3 到 16 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ validator: checkEmail, trigger: 'blur' }
],
mobile: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ validator: checkMobile, trigger: 'blur' }
]
}