【VUE】输⼊框input正则表达式校验字符、校验⼿机号、校验邮箱、密码复杂
度
页⾯组件使⽤
此处使⽤AntDesign的表单组件作为⽰例，element-ui实现⽅式同理
使⽤rules属性绑定校验规则，item中⽤prop属性绑定校验规则中的项
<template>
<div>
<a-form-model
:model="userData"
:label-col="labelCol"
:wrapper-col="wrapperCol"
:
rules="rules"
ref="ruleForm"
>
<a-form-model-item label="⼈员名称:" prop="name">
<a-input v-model="userData.name" placeholder="请输⼊⼈员名称"/>
</a-form-model-item>
<a-form-model-item label="⼈员账号:" prop="account">
<a-input v-model="userData.account" placeholder="请输⼊账号"/>
</a-form-model-item>
<a-form-model-item label="⼿机号码:" prop="mobile">
<a-input v-model="bile" placeholder="请输⼊⼿机号码"/>
</a-form-model-item>
<a-form-model-item label="电⼦邮件:" prop="email">
<a-input v-model="ail" placeholder="请输⼊电⼦邮件"/>
</a-form-model-item>
</a-form-model>
<a-button type="primary" @click="onSubmit">保存</a-button>
</div>
</template>
正则表达式实现
<script>
export default{
data(){
// 表单校验⽅法
const checkAccount=(rule, value, callback)=>{
const regEn =/[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im
const regCn =/[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/im
st(value)|| st(value)){
callback(new Error('不能包含特殊字符'))
}else{
callback()
}
手机密码}
const checkMobile=(rule, value, callback)=>{
const regCN =/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
if(!st(value)){
callback(new Error('⼿机号格式不正确'))
}else{
callback()
}
}
const checkMail=(rule, value, callback)=>{
const regCN =/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
if(!st(value)){
callback(new Error('邮箱格式不正确'))
}else{
callback()
callback()
}
}
return{
userData:{
name:'',
account:'',
mobile:'',
email:'',
},
rules:{
name:[{ required:true, message:'请输⼊⼈员名称', trigger:'blur'}], account:[
{ required:true, message:'请输⼊账号', trigger:'blur'},
{ validator: checkAccount, trigger:'blur'}
]
mobile:[
{ required:true, message:'请输⼊⼿机号码', trigger:'blur'},
{ validator: checkMobile, trigger:'change'}
],
email:[
{ required:true, message:'请输⼊电⼦邮箱', trigger:'blur'},
{ validator: checkMail, trigger:'change'}
]
//trigger 说明 blur：失去焦点触发校验,change：值改变时触发
// { validator: checkMail, trigger:['blur','change'] } 两种情况下都触发}
}
},
methods:{
onSubmit(){
const that =this
/
/校验表单规则
this.$refs['ruleForm'].validate(valid =>{
if(valid){
that.saveUserData()
}
})
},
saveUserData(){
//保存⽤户信息
//其他代码
this.$refs['ruleForm'].resetFields()
}
}
}
</script>
密码复杂度
【推荐】
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论