ElementUI表单校验rules封装

更新时间:2023-05-11 13:19:58 阅读: 评论:0

ElementUI表单校验rules封装
⼯具⽂件: validator.js
//校验规则列表(可扩展)
const rules ={
URL(url){
const regex =/^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9 ])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|muum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?"\\+& %$#=~_-]+))*$/
return valid(url, regex,"URL格式不正确")
},
LowerCa(str){
const regex =/^[a-z]+$/
return valid(str, regex,"只能输⼊⼩写字母")
},
UpperCa(str){
const regex =/^[A-Z]+$/
return valid(str, regex,"只能输⼊⼤写字母")
},
Alphabets(str){
const regex =/^[A-Za-z]+$/
return valid(str, regex,"只能输⼊字母")
},
Email(email){
const regex =/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ return valid(email, regex,"邮箱地址格式不正确")
},
Mobile(mobile){
const regex =/^1\d{10}$/
return valid(mobile, regex,"⼿机号格式不正确")
},
Phone(phone){
const regex =/^(0\d{2,3})?-?\d{7,8}$/
return valid(phone, regex,"电话号码格式不正确")
},
Postcode(postcode){
const regex =/^[0-9][0-9]{5}$/
return valid(postcode, regex,"邮编格式不正确")
},
Number(num){
const regex =/^\d+$/
return valid(num, regex,"只能输⼊纯数字")
},
Fax(fax){
const regex =/^(\d{3,4}-)?\d{7,8}$/
return valid(fax, regex,"传真格式不正确")
},
Int(num){
const regex =/^((0)|([1-9]\d*))$/
return valid(num, regex,"只能输⼊⾮负整数")
},
IntPlus(num){
const regex =/^[1-9]\d*$/
return valid(num, regex,"只能输⼊正整数")
},
Float1(num){
const regex =/^-?\d+(\.\d)?$/
return valid(num, regex,"只能输⼊数字,最多⼀位⼩数")
},
Float2(num){
const regex =/^-?\d+(\.\d{1,2})?$/
return valid(num, regex,"只能输⼊数字,最多两位⼩数")
},
Float3(num){
const regex =/^-?\d+(\.\d{1,3})?$/
return valid(num, regex,"只能输⼊数字,最多三位⼩数")
},
FloatPlus3(num){
const regex =/^\d+(\.\d{1,3})?$/
return valid(num, regex,"只能输⼊数字,最多三位⼩数")
},
Encode(code){
const regex =/^(_|-|[a-zA-Z0-9])+$/
return valid(code, regex,"编码只能使⽤字母、数字、下划线、中划线")
},
Encode2(code){
const regex =/^[a-zA-Z0-9]+$/
return valid(code, regex,"编码只能使⽤字母、数字")
},
Encode3(code){
const regex =/^(_|[a-zA-Z0-9])+$/
return valid(code, regex,"编码只能使⽤字母、数字、下划线")
},
IdCard(code){
const regex =/^[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]$/
return valid(code, regex,"请输⼊正确的⾝份证号码")
},
USCC(code){
const regex =/^[0-9A-Z]{18}/
return valid(code, regex,"请输⼊正确的社会信⽤号")
},
CarNum(code){
const regex =/^(([京津沪渝冀豫云辽⿊湘皖鲁新苏浙赣鄂桂⽢晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽⿊湘皖鲁新苏浙赣鄂桂⽢晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/i
return valid(code, regex,"请输⼊正确的车牌号")
},
CNandEN(code){
const regex =/^[a-zA-Z\u4e00-\u9fa5]+$/
return valid(code, regex,"只能使⽤中⽂、英⽂")
},
MobileOrPhone(val){
const result =/^1\d{10}$/.test(val)||/^(0\d{2,3})?-?\d{7,8}$/.test(val)
return valid(result,null,"⼿机或电话号格式不正确")
}
}
}
//val:String 要校验的值
//regex:RegExp 校验正则,不是正则时val作为result的值
//msg:String 校验不通过的错误信息
function valid(val, regex, msg){
return{result: regex instanceof RegExp? st(val):!!val, errMsg: msg}
}
/
/required:Boolean 是否必填项,选填,默认"true"
//type:String/Function 校验类型,选填,
//    String时必须是上⾯rules中存在的函数名,
//    Function时只接收⼀个参数(输⼊值),返回格式: {result:Boolean, errMsg:String}
//trigger:String 触发动作,选填,默认"blur"
//nullMsg:String 未输⼊的提⽰语,选填,required=true时有效
export function vxRule(required=true, type, trigger="blur", nullMsg="该字段为必填项"){
const rule ={ required:!!required, trigger}
let check =null
if(typeof type ==="function"){
check = type
}el{
check = type ? rules[type+""]:null
}
if(check){//存在规则时添加规则
rule.validator=(r, v, c)=>{
const{result, errMsg}=check(v)
if(required){
//必填项: null,undefined,"","  " 都算⽆输⼊内容
return(v==null||(v+"").trim()==="")?c(new Error(nullMsg)): result ?c():c(new Error(errMsg)) }
//选填项: null,undefined,"" 都算⽆输⼊内容,"  "会被校验
return(v==null||(v+"")===""|| result)?c():c(new Error(errMsg))
}
}el{
}
return[rule]
}
使⽤validator.js
//example:
import{ vxRule }from"./validator"
export default{
data(){
return{
rules:{//rules绑定到el-form的rules属性
//必填,blur触发,为空时使⽤默认提⽰语
aaa:vxRule(),
//必填,blur触发,为空时使⽤⾃定义提⽰语
bbb:vxRule(true,null,"blur","请输⼊bbb"),
//必填,change触发,为空时使⽤⾃定义提⽰语
ccc:vxRule(true,null,"change","请选择ccc"),
//必填,blur触发,使⽤rules中的校验规则,为空时使⽤默认提⽰语        ddd:vxRule(true,"URL"),
//必填,blur触发,使⽤rules中的校验规则,为空时使⽤⾃定义提⽰语        eee:vxRule(true,"Number","blur","请输⼊eee"),
//选填时候,第4个参数是多余的,因为⽤不到
//选填,blur触发,使⽤rules中的校验规则
fff:vxRule(fal,"Float3"),
//选填,blur触发,使⽤⾃定义校验规则
ggg:vxRule(fal, val=>{
return{result:/^[a-z]+$/.test(val), errMsg:"只能输⼊⼩写字母"}
})
}
}
}
}

本文发布于:2023-05-11 13:19:58,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/585797.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:格式   规则   校验   选填   触发
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图