各省施工备案网站,做动漫网站的素材,机电建设工程施工网站图片,自动采集的网站需求
之前的表单代码看了下#xff0c;写的比较冗长#xff0c;于是去万能的Github找点轮子#xff0c;发现了这个#xff1a;
GitHub - aweiu/element-ui-verify: 如果你受够了饿了么ElementUI原生的校验方式#xff0c;那就来试试它吧#xff01;一款更懂你的校验插件…需求
之前的表单代码看了下写的比较冗长于是去万能的Github找点轮子发现了这个
GitHub - aweiu/element-ui-verify: 如果你受够了饿了么ElementUI原生的校验方式那就来试试它吧一款更懂你的校验插件 但是用起来发现不支持最新的vue因为里面基于mixin混入。改了一会没耐性了这么简单个功能自己卷个轮子算了索性自己改但是要有以下几点支持
1支持label提示例如必输的信息如果前面label为用户的话输入框提示为“用户昵称不为空”如果是最小长度检测的话需要提示“用户昵称最少4字符”。而用户昵称的校验器我只需要设置“用户昵称”这个变量提示信息自动拼接
2支持验证器组合例如同时非空且为数值格式。
3支持自定义提示信息不要自己构造方法最好都参数化解决
思路
既然都Typescript了我们就采用对象的方式来解决问题。问题1的方式只需要在构造器里添加label信息即可。
问题2的方式写过后端的都知道有个很舒服的方式叫做 链式调用OK把多行代码压缩为一行个的方式就它了。
问题3给个可选参数就好这个是es5的好工具结合typescript的默认值操作很方便的解决
问题4有些代码直接照搬了github其它未测试的部分理论上应该没问题有BUG再回来改
效果
以修改密码的业务为例这样个界面 改造前
原来代码
/** 修改密码窗体模块 */
templatecc-windowrefwindowDomv-bind$attrstitle修改当前用户密码width400px:append-to-bodytruesubmitonSubmitel-formrefeditFormDom:modelformauto-completeoff:label-width100classh-rmargin40:rulesformRulesel-form-item propuserPsw label输入密码el-input typepassword v-modelform.userPsw maxlength20 show-password //el-form-itemel-form-item classx-fillitem propreUserPsw label确认密码el-input typepassword v-modelform.reUserPsw maxlength20 show-password //el-form-item/el-form/cc-window
/template
校验部分
const formRules reactive{userPsw: any[]reUserPsw: any[]
}({userPsw: [{ required: true, message: 请输入密码, trigger: [change, blur] },{pattern: /^(?![0-9]$)(?![a-zA-Z]$)[0-9A-Za-z]\S{5,20}$/,message: 需同时含有字母和数字长度在6-20之间,trigger: [change, blur]}],reUserPsw: [{ required: true, message: 请重新输入密码, trigger: [change, blur] },{validator: (rule: any, value: any, callback: object) {return value form.userPsw},message: 两次输入的密码不相等,trigger: [change, blur]}]
})
改造后
/** 修改密码窗体模块 */
templatecc-windowrefwindowDomv-bind$attrstitle修改当前用户密码width400px:append-to-bodytruesubmitonSubmitel-form refeditFormDom :modelform auto-completeoff :label-width100 classh-rmargin40el-form-itempropuserPswlabel输入密码:rulesutils.validate(密码).required().pattern(/^(?![0-9]$)(?![a-zA-Z]$)[0-9A-Za-z]\S{5,20}$/, 需同时含有字母和数字长度在6-20之间)el-input typepassword v-modelform.userPsw maxlength20 show-password //el-form-itemel-form-itemclassx-fillitempropreUserPswlabel确认密码:rulesutils.validate(密码).compare(form.userPsw)el-input typepassword v-modelform.reUserPsw maxlength20 show-password //el-form-item/el-form/cc-window
/template可见简短了很多方便使用还避免了出错
代码实现
代码实现也不复杂写一个模块即可解决
/*** 链式校验模块支持常用校验方式** 使用列* import {validate} from /utils/Validator** //建立一个非空4字符以上的昵称校验未输入提示“请输入昵称”过短提示“昵称长度最小为 4 字符”* validate(昵称).required().minLength(4)** 注意除了非空校验外其它校验都是为空可以通过的除非显示的指定了非空校验required** author Jim 24/04/06*/export interface IValidator extends Arrayany {required: (error?: string) IValidator // 必须输入gt: (value: number, error?: string) IValidator // 必须大于gte: (value: number, error?: string) IValidator // 必须大于等于lt: (value: number, error?: string) IValidator // 必须小于于lte: (value: number, error?: string) IValidator // 必须小于等于minLength: (size: number, error?: string) IValidator // 不能小于X字符precision: (digitSize: number, error?: string) IValidator // 校验数字最大小数位(精度限制)number: () IValidator // 校验是否为数字int: () IValidator // 校验是否为整数phone: () IValidator // 校验是否为手机号随着号段的增加未来可能需要更新email: () IValidator // 校验是否为电子邮件地址verifyCode: () IValidator // 校验6位数字验证码pattern: (regex: RegExp, error?: string) IValidator // 校验正则格式compare: (otherVal: string, error?: string) Validator // 校验两次输入一致
}export class Validator extends Array implements IValidator {private labelText?: string undefinedconstructor(label?: string) {super(0)this.labelText labelreturn this}required(error?: string): Validator {this.push({required: true,message: error ?? (this.labelText ? 请输入${this.labelText} : 输入不能为空),trigger: [change, blur]})return this}gt(value: number, error?: string): Validator {this.push({validator: (rule: any, val: any, callback: (error?: Error) void) {return !val || val value},message: error ?? ${this.labelText ?? 输入数值}应大于 ${value},trigger: [change, blur]})return this}gte(value: number, error?: string): Validator {this.push({type: number,min: value,transform: (v: string) Number(v),message: error ?? ${this.labelText ?? 输入数值}不能小于 ${value},trigger: [change, blur]})return this}lt(value: number, error?: string): Validator {this.push({validator: (rule: any, val: any, callback: (error?: Error) void) {return !val || val value},message: error ?? ${this.labelText ?? 输入数值}应小于 ${value},trigger: [change, blur]})return this}lte(value: number, error?: string): Validator {this.push({type: number,max: value,transform: (v: string) Number(v),message: error ?? ${this.labelText ?? 输入数值}不能大于 ${value},trigger: [change, blur]})return this}minLength(size: number, error?: string): Validator {this.push({validator: (rule: any, val: any, callback: (error?: Error) void) {return (val?.length || 0) size},message: error ?? ${this.labelText ?? 内容}长度最小为 ${size} 字符,trigger: [change, blur]})return this}precision(digitSize: number, error?: string): Validator {this.push({validator: (rule: any, val: any, callback: (error?: Error) void) {const decimal val.toString().split(.)[1]return !!decimal decimal.length digitSize},message: error ?? ${this.labelText ?? }小数部分不能超过 ${digitSize} 位,trigger: [change, blur]})return this}number(): Validator {return this.pattern(/^([-])?\d(\.\d)?$/, ${this.labelText ?? }请输入数字)}int(): Validator {this.push({type: integer,transform: (v: string) Number(v),message: 请输入整数,trigger: [change, blur]})return this}phone(): Validator {return this.pattern(/^1\d{10}$/, 请输入正确手机号码)}email(): Validator {this.push({type: email,message: 邮箱格式不正确,trigger: [change, blur]})return this}verifyCode(): Validator {return this.pattern(/^([-])?\d(\.\d)?$/, 请输入验证码)}compare(otherVal: string, error?: string): Validator {this.push({validator: (rule: any, val: any, callback: (error?: Error) void) {return !val || val otherVal},message: error ?? ${this.labelText ?? }两次输入不一致,trigger: [change, blur]})return this}pattern(regex: RegExp, error?: string) {this.push({validator: (rule: any, val: any, callback: (error?: Error) void) {return !val || regex.test(val)},message: error ?? 请输入正确格式,trigger: [change, blur]})return this}
}export const validate: (label?: string) IValidator (label) {return new Validator(label)
}不到200行搞掂 小遗憾
与element-ui-verify相比唯一有点小遗憾的这种方式还是基于配置无法自动获取到label的信息了不然定义完label后还得重复写一次精简的不够极致。而且也无法响应校验的配置变化算一点小遗憾了以后有空再继续改造
