前端表单校验的使用和实现

首先来看一下element给出的案例

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="密码" prop="pass"><el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model.number="ruleForm.age"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item>
</el-form>
<script>export default {data() {var checkAge = (rule, value, callback) => {if (!value) {return callback(new Error('年龄不能为空'));}setTimeout(() => {if (!Number.isInteger(value)) {callback(new Error('请输入数字值'));} else {if (value < 18) {callback(new Error('必须年满18岁'));} else {callback();}}}, 1000);};var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('请输入密码'));} else {if (this.ruleForm.checkPass !== '') {this.$refs.ruleForm.validateField('checkPass');}callback();}};var validatePass2 = (rule, value, callback) => {if (value === '') {callback(new Error('请再次输入密码'));} else if (value !== this.ruleForm.pass) {callback(new Error('两次输入密码不一致!'));} else {callback();}};return {ruleForm: {pass: '',checkPass: '',age: ''},rules: {pass: [{ validator: validatePass, trigger: 'blur' }],checkPass: [{ validator: validatePass2, trigger: 'blur' }],age: [{ validator: checkAge, trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}}
</script>

需要关注的点：

三个组件

el-form el-form-item el-input

校验规则在form组件中，具体的值绑定至input，通过操作form节点的.validate方法来实现校验，具体的数据和绑定看下面代码

<template><div><WWQBlock class="form"><WWQForm ref="formItems" :model="formData" :rules="ruleValidate"><WWQFromItem label="姓名 :" prop="value1"><WWQInputplaceholder="请输入内容..."inputType="text"v-model="formData.value1"></WWQInput></WWQFromItem><WWQFromItem label="密码 :" prop="value2"><WWQInputplaceholder="请输入内容"inputType="password"v-model="formData.value2"></WWQInput></WWQFromItem><WWQFromItem label="爱好 :" prop="value3"><WWQSelect v-model="formData.value3" :data="selectData"></WWQSelect></WWQFromItem><div></div></WWQForm><WWQBlock><WWQButtontype="success"size="small"@click="changeButton"radius="10px">提交</WWQButton></WWQBlock></WWQBlock></div>
</template><script>
export default {name: "App",data() {return {formData: {value1: "",value2: "",value3: "",},ruleValidate: {value1: [{ required: true, message: "用户名不能为空", trigger: "blur" }],value2: [{ required: true, message: "放心输入自己的隐私吧！", trigger: "blur" },{ required: true, min: 0, max: 8, message: "超出限制了...",trigger: "change"     },],value3: [{ required: true, message: "总得有个特长什么的吧？", trigger: "blur" },],},}},methods: {changeButton() {console.log(this.formData);this.$refs.formItems.validate() // 验证方法.then((res) => {console.log(res);});},},
};
</script>

可以看到 el-form el-form-item el-input 这三个组件时互相嵌套关系，并非简单的父子组件，想要查看只能通过插槽，但是还有一种更灵活的办法，

那就是 provide 广播 和 inject 派发

首先需要定义一个事件总线，以供全局使用


function broadcast(componentName, eventName, params) {// 循环子节点找到名称一样的子节点 否则 递归 当前子节点this.$children.map((child) => {if (componentName === child.$options.name) {child.$emit.apply(child, [eventName].concat(params));} else {broadcast.apply(child, [componentName, eventName].concat(params));}});
}
export default {methods: {/*** 派发 (向上查找) (一个)* @param componentName // 需要找的组件的名称* @param eventName // 事件名称* @param params // 需要传递的参数*/dispatch(componentName, eventName, params) {let parent = this.$parent || this.$root; //$parent 找到最近的父节点 $root 根节点let name = parent.$options.name; // 获取当前组件实例的name// 如果当前有节点 && 当前没名称 且 当前名称等于需要传进来的名称的时候就去查找当前的节点// 循环出当前名称的一样的组件实例while (parent && (!name || name !== componentName)) {parent = parent.$parent;if (parent) {name = parent.$options.name;}}// 有节点表示当前找到了name一样的实例if (parent) {parent.$emit.apply(parent, [eventName].concat(params));}},/*** 广播 (向下查找) (广播多个)* @param componentName // 需要找的组件的名称* @param eventName // 事件名称* @param params // 需要传递的参数*/broadcast(componentName, eventName, params) {broadcast.call(this, componentName, eventName, params);},},
};

在父组件我们这样做

  provide() {// 这里相当于把整个组件实例广播出去return {form: this,};},

子组件中通过inject获取

 inject: ["form"],

这样一来三个组件可以互相通信，并且彼此更改组件之间的值，

form组件在接受到rule和model之后干了什么？

<template><form action=""><slot></slot></form>
</template><script>
export default {name: "WWQForm",provide() {return {form: this,};},data() {return {fields: [], // 储存当前的 form-item的实例};},created() {let that = this;this.$on("on-form-item-add", (item) => {if (item) {that.fields.push(item);}});this.$on("on-form-item-remove", (item) => {if (item.prop) {that.fields.splice(that.fields.indexOf(item), 1);}});},methods: {resetFields() {this.fields.forEach((field) => {field.resetField();});},validate(callback) {return new Promise((resolve) => {let valid = true; // 默认是通过let count = 0; // 来匹配当前是否是全部检查完this.fields.forEach((field) => {// 每个实例都会有 validation 的校验的方法field.validation("", (error) => {if (error) {valid = false;}// 通过当前检查完所有的form-item的时候才会调用if (++count === this.fields.length) {resolve(valid); // 方法使用thenif (typeof callback === "function") {callback(valid); // 直接调用注入的回调方法} }});});}); }, },};

可以看到该组件广播了两个事件，并且定义了验证方法，遍历逐一校验表单项，

form-item做了啥？

<template><div class="wwq-form-item"><label class="wwq-label" v-if="label" for="">{{ label }}</label><slot></slot><Transition name="tip"><span class="wwq-form-item-message" v-if="validateState === 'error'">{{ validateMessage }}</span></Transition></div>
</template><script>
import Emitter from "../../emitter";
import schema from "async-validator";
export default {name: "WWQFromItem",mixins: [Emitter],inject: ["form"],props: {label: String,prop: String,},computed: {fieldValue() {return this.form.model[this.prop];},},data() {return {initialValue: "", // 储存默认值isRequired: false, // 当前的是否有问题validateState: "", // 是否校验成功validateMessage: "", // 校验失败文案};},methods: {setRules() {let that = this;let rules = this.getRules(); //拿到父组件过滤后当前需要使用的规则if (rules.length) {this.isRequired = rules.some((rule) => {return rule.required;});}this.$on("on-form-blur", that.onFieldBlur);this.$on("on-form-change", that.onFieldChange);},getRules() {let that = this;let rules = that.form.rules;rules = rules ? rules[that.prop] : [];return [].concat(rules || []); //这种写法可以让规则肯定是一个数组的形式},onFieldBlur() {this.validation("blur");},onFieldChange() {this.validation("change");},getFilteredRule(trigger) {let rules = this.getRules();// !res.trigger 没有调用方式的时候默认就校验的// filter 过滤出当前需要的规则return rules.filter((res) => !res.trigger || res.trigger.indexOf(trigger) !== -1);},validation(trigger, callback = function () {}) {let rules = this.getFilteredRule(trigger);// 判断当前是否有规则if (!rules || rules.length === 0) {return;}this.validateState = "validating";var validator = new schema({ [this.prop]: rules });// firstFields: true 只会校验一个validator.validate({ [this.prop]: this.fieldValue },{ firstFields: true },(errors) => {this.validateState = !errors ? "success" : "error";this.validateMessage = errors ? errors[0].message : "";callback(this.validateMessage);});},resetField() {this.form.model[this.prop] = this.initialValue;},},// 组件渲染时，将实例缓存在 Form 中mounted() {// 如果没有传入 prop，则无需校验，也就无需缓存if (this.prop) {this.dispatch("WWQForm", "on-form-item-add", this);// 设置初始值，以便在重置时恢复默认值this.initialValue = this.fieldValue;// 添加表单校验this.setRules();}},// 组件销毁前，将实例从 Form 的缓存中移除beforeDestroy() {this.dispatch("WWQForm", "on-form-item-remove", this);},
};
</script>

通过自身接受的字段从父级获取表单绑定的value，并广播交互事件

input组件做的事

<template><div class="wwq-input"><input:type="inputType":value="defaultValue"@input="handleInput"@blur="handleBlur":placeholder="placeholder"/></div>
</template><script>
import Emitter from "../../emitter";
export default {name: "WWQInput",mixins: [Emitter],data() {return {defaultValue: this.inputVal,};},props: {inputType: {type: String,default: "text",},value: String,placeholder: String,},watch: {value(val) {this.defaultValue = val;},},methods: {handleInput(event) {this.defaultValue = event.target.value;this.$emit("input", event.target.value);// 将当前的值发送到 aiFormItem 进行校验this.dispatch("WWQFromItem", "on-form-change", event.target.value);},handleBlur(event) {// vue 原生的方法 return 出去this.$emit("blur", event.target.value);// 将当前的值发送到 aiFormItem 进行校验this.dispatch("WWQFromItem", "on-form-blur", event.target.value);},},
};
</script>

表单交互事件派发给 form-item 组件，改变绑定value的同时触发校验

校验失败的话 form-item 会弹出警告信息。

注意：

绑定至父级节点form的rule一定要符合规范~

  ruleValidate: {value1: [{ required: true, message: "用户名不能为空", trigger: "blur" }],value2: [{ required: true, message: "放心输入自己的隐私吧！", trigger: "blur" },{ required: true, min: 0, max: 8, message: "超出限制了...",trigger: "change" },],value3: [{ required: true, message: "总得有个特长什么的吧？", trigger: "blur" },],},