element-ui表单验证（即拿即用）
原创
无纤尘
一、表单el-form上加rules
<el-form ref="form" :model="form" label-width="120px" :rules="rule">
<el-form-item label="用户姓名" prop="name" >
<el-input v-model="form.name" placeholder="请输入用户姓名" clearable/>
</el-form-item>
<el-form-item label="身份证号码" prop="IdCard">
<el-input v-model="form.IdCard" placeholder="请输入身份证号码" clearable />
</el-form-item>
</el-form>rules： 是el-form的一个属性，作用是绑定验证器对象。ref ： 作用类似于Dom中的id方便js拿用。prop: el-form-item 的一个字段，对应的是rules验证器内的名称，与传入form组件的model字段必须一样！ 必填！
export default {
data() {
return {
form: {
name: '',
IdCard: '',
},
rule: {
name:[
{required:true,message:'请输入姓名',trigger:'blur'},
{min: 2, max: 6, message:'长度在2到6个字符',trigger:'blur'},
{
required: true,
// pattern: /^[\u4e00-\u9fa5a-z]+$/gi, //只能输入汉字和英文字母
pattern: /^[\u4e00-\u9fa5a-z]+$/gi, //只能输入汉字和英文字母
message: '姓名不支持特殊字符',
trigger: 'blur'
},
],
IdCard:[
{required:true,message:'请输入身份证号',trigger:'blur'},
{min: 15, max: 18, message:'请如实填写18位号码',trigger:'blur'},
{
required: true,
pattern: /([1-9][0-9]{14})|([1-9][0-9]{16}[0-9xX])/ ,
message: '请输入正确身份证号码',
trigger: 'blur'
},
],
}
}
},
}对于有些需要自定义的效验规则，可以作为变量写在data中
<el-form ref="form" :model="form" label-width="120px" >
<el-form-item label="密码" prop="password" >
<el-input v-model="form.password" placeholder="请输入密码" clearable/>
</el-form-item>
<el-form-item label="确认密码" prop="comPassword" >
<el-input v-model="form.comPassword" placeholder="请输入用户姓名" clearable/>
</el-form-item>
</el-form>export default {
data() {
let reg = /(?!^(\d+|[a-zA-z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{6,12}$/
var validatePwd = (rule,value,callback) =>{
if (!reg.test(value)) {
callback(new Error('密码是6-12位数字、字母或字符！'))
}else{
callback()
}
}
var validateComPwd = (rule,value,callback) =>{
if (this.form.password !== value) {
callback(new Error('确认密码与密码不一致'))
}else{
callback()
}
}
return {
form: {
password:'',
comPassword:'',
},
rule: {
password:[
{required:true,message:'请输入密码',trigger:'blur'},
{validator:validatePwd,trigger:'blur'},
],
comPassword:[
{required:true,message:'请输入确认密码',trigger:'blur'},
{validator:validateComPwd,trigger:'blur'},
]
}
}
},
}二、在el-form-item上加rules
<el-form ref="form" :model="form" label-width="120px" >
<el-form-item label="联系方式" prop="phoneNum" :rules="[{required:true,message:'请输入电话号码',trigger:'blur'},{required: true,pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,message: '请输入正确的电话号码',trigger: 'blur'}]">
<el-input v-model="form.phoneNum" placeholder="请输入用户电话号码" clearable/>
</el-form-item>
</el-form>这种方法适用于个别需要验证的字段，或者表单字段又变动的效验。
三、验证规则
是否必须填： required:true|| fasle
根据正则表达式验证： pattern
最大长度和最小长度： min和max
数据转换：transform（value）{return}
自定义校验功能：validador:fn(rule, value, callback)
监测文本框焦点：trigger
trigger类型为blur的功能是文本框失去焦点才会触发
trigger类型为change的功能是文本框在输入内容时触发
trigger类型也可以同时使用blur和change，功能结合上面两个的功能自带验证类型： type
string：必须是类型string。
number：必须是类型number。
boolean：必须是类型boolean。
method：必须是类型function。
regexp：必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp。
integer：必须是类型number和整数。
float：必须是类型number和浮点数。
array：必须是由…确定的数组Array.isArray。
object：必须是类型object而不是Array.isArray。
enum：价值必须存在于enum。
date：值必须有效，由确定 Date
url：必须是类型url。
hex：必须是类型hex。
email：必须是类型email。版权协议须知！
本篇文章来源于 岳岳 ，如本文章侵犯到任何版权问题，请立即告知本站，本站将及时予与删除并致以最深的歉意
612 0 2022-09-13
