表单必填项的正则验证三种写法
// 比较繁琐的写法---- ①需要ref一起绑定model数据,rules绑定正则验证
<el-form ref="form" :model="form" :rules="rules">
<el-form-item label="密码" prop="sysAccountPwd">
<el-input
v-model="form.sysAccountPwd"
autocomplete="off"
placeholder="请输入8-20位密码"
/>
</el-form-item>
</el-form>
<script>
// ②正则要求
const pwdPattern = /^(?![a-zA-Z]+$)(?![0-9]+$)(?![._~!@#$^&*]+$)(?![0-9a-zA-Z]+$)(?![0-9._~!@#$^&*]+$)(?![a-zA-Z._~!@#$^&*]+$)[A-Za-z0-9._~!@#$^&*]{8,20}$/
export default {
data() {
const validatePassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入正确密码'))
} else if (!pwdPattern.test(value)) {
callback(new Error('密码必须同时包含至少一个字母、一个数字和一个标点符号'))
} else {
callback()
}
}
return {
form: {
sysAccountPwd:''
},
//失去焦点后进行 ③正则验证
rules: {
sysAccountPwd: [
{ required: true, trigger: 'blur', validator: validatePassword }
],
}
}
}
简单写法只需要input表单的pattern属性
//第一步一样,省略第二步,只需要在第三步失去焦点验证正则的时候添加上pattern正则要求
<el-form :model="dataForm" :rules="rules" ref="dataFromRef">
<el-form-item label="手机号" prop="phone">
<el-input v-model="dataForm.phone"></el-input>
</el-form-item>
</el-from>
export default {
data() {
return{
dataForm:{
phone: '',
},
rules:{
phone: [
{ required: true, trigger: 'blur', message: '请输入手机号' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
]
}
}
}
}
最最简单的方法,直接在第一步进行正则验证(表单不显示*必填项)
<input v-model="dataForm.phone" pattern="^[a-zA-Z][a-zA-Z0-9_]{4,15}$" />
//当在弹窗表单验证时,触发验证然后关闭弹窗,再打开后往往还是显示校验,可以用以下清除表单的方法
<el-dialog :title=title :visible.sync="visible" width="30%" top="5vh" append-to-body center :close-on-click-modal="false" :before-close="close">
//关闭弹窗
close() {
this.visible = false;
this.$refs['form'].clearValidate()
},