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|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?"\\+&%$#=~_-]+))*$/return valid(url, regex, "URL格式不正确")},LowerCase(str) {const regex = /^[a-z]+$/return valid(str, regex, "只能输入小写字母")},UpperCase(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挂学警港澳使领]))$/ireturn 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? regex.test(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 = nullif(typeof type === "function"){check = type}else{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))}}else{rule.message = nullMsg}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(false, "Float3"),//选填，blur触发，使用自定义校验规则ggg: vxRule(false, val=>{return {result: /^[a-z]+$/.test(val), errMsg: "只能输入小写字母"}})}}}
}

ElementUI表单校验rules封装相关推荐

vue 数组中嵌套数组_vue+element-ui表单校验之数组多层嵌套
表单校验两层数组嵌套 :prop="'collectKidDtoList.'+index+'.collectKid.'+i+'.collectCode'" :rules=" ...
element-ui 表单校验，el-select校验失效问题
form表单验证时,遇到了校验失效问题,有值的情况下,校验规则并没有对应消失,检查了几个容易出错的地方:1.:model="addForm" 用model绑定表单,而不是v-mod ...
VUE + Element-UI 表单校验input框数据已存在
基础校验方式实现 html代码 <el-form-item label="值名称:" style="width: 80%" prop="valu ...
element-UI 表单校验失效处理
1.el-form-item 的 prop属性绑定的要是字符串: eg: :prop="'answer[' + 0 + ']' " //而不是 :prop=&qu ...
elementui表单校验原始密码_javascript 中入门数据校验
1.onSubmit 放在表单中,返回false为不提交 ,所以放一个函数在里面所有的数据获取,数据判断:都在内:(把一个value放到一个值,和另一个value值比对): 2.获取提交的数据 , ...
element-ui表单校验
<el-form :model="form" ref="form" :rules="rules" ><el-form-it ...
EelemntUI中e-form表单校验的使用以及表单校验的规则
场景 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 官方示例代码 <el-form ...
2.vue3医疗在线问诊项目 - _登录模块 ==＞代码片段、css变量主题定制、cp-nav-bar组件封装、svg打包精灵图插件、cp-icon组件封装、表单校验、密码登录、短信验证码登录及两者
2.医疗在线问诊项目 - _登录模块 ==> 代码片段.css变量主题定制.cp-nav-bar组件封装.svg打包精灵图插件.cp-icon组件封装.表单校验.密码登录.短信验证码登录及两者的 ...
Day84.尚好房 — 功能提取、页面封装、jquery-validate表单校验、完成角色 | 用户管理模块
目录角色管理模块一.角色管理代码封装 ★ 1.封装BaseDao 2.封装BaseDao 3.封装BaseServiceImpl 4.封装Controller层二.前端页面封装 1.封装头部c ...

ElementUI表单校验rules封装

ElementUI表单校验rules封装相关推荐

最新文章

热门文章