《Vue》聊一聊实际项目中输入框的校验的几种优化方案，webrtc音视频开发

function Validate(msg)(

return [

{ required: true, message: msg, trigger: ‘blur’ }

]

)

有的小伙伴可能会说，这不行啊这使用场景太局限了，就只能验证必输项，太鸡肋…到这里仅仅是抛砖引玉，只是提供了个思路，在实用性上还是有很大缺陷的，如果有小伙伴希望能具体细聊一下，那我们就简单说下，一般常规的验证规则大致可以分为以下几种：

1. 仅必输项，无其他验证规则；

2. 仅允许英文字母；

3. 仅允许数字；

4. 仅允许英文字母和数字；

那我们就预设几个参数，分别对应：提示信息，是否必输，验证方式，大致运行流程如下：

流程图

效果

经过转换后，效果依旧是原来的效果，并没有影响其正常使用，错误提示依然是借助于IView或者ElementUI的错误提示实现

​

期望结果

期望输入

handleParams({messgage:“用户名不能为空”},“code”)

期望输出

[

{

required: true,

message: “用户名不能为空”,

trigger: “blur”,

},

{

// validate:根据参数实现的自定义校验

validator: validate(isCode, “请输入数字或字母”),

trigger: “blur”,

}

]

实现

1. 第一步就是对参数的初始化，在这一步中，我们需要对参数进行简略的处理，并且定义一个默认参数，大致如下代码；

// 将参数转成数组，方便处理

const args = [].slice.call(arguments);

// 默认配置

const DEFAULT_MESSAGE = {

required: true,

message: “该输入项为必填项”,

trigger: “blur”,

};

2. 处理参数，根据具体的参数的转成对应的合法参数并返回，这里需要对输入做一个合法性进行判断；

// 处理参数

const params = handleParams(args);

/**

• 处理参数

• @param {Array} array 参数

• @returns 合法值

*/

const handleParams = (array) => {

const result = {

type: “”,

require: null,</