/** * 执行错误提示函数，用input-error 类名和含有错误信息的p元素表示未通过校验 * @param el: HTMLElement，传入当前绑定的input元素 * @param errorMsg: string，传入错误提示信息 */ const validateError = (el: HTMLElement, errorMsg: string) => { if (Array.prototype.includes.call(el.classList, 'input-error')) { //如果当前组件里已经有了错误提示信息，什么也不做 return; } else { const errorNode = document.createElement('p'); errorNode.className = 'error-tips'; errorNode.textContent = errorMsg; if (el.parentNode) { // 在当前input 元素后追加一个p元素，内容为错误提示 el.parentNode.appendChild(errorNode); } // 在当前input 元素上添加一个input-error类名 el.className += ' input-error'; } };
现在我就把自己实现的这个表单校验插件大致说完了，下面我们看下具体使用。
3.自定义校验指令v-validateParams使用
首先新建校验规则文件：
// rules.ts export const required = (message) => ({ message, required: true }); export const min = (message, length=3) => ({ message, min: length }) export const max = (message, length=15) => ({ message, max: length }) export const pattern = (message, reg) => ({ message, pattern: reg }) // form.vue <template> <div> <div> <label for="userEmail">用户名：</label> <input type="text" v-model="userName" v-validateParams="[inputNameRequired, inputNameMin, inputNameMax, inputNamePattern]"> </div> <button v-if="show" type="success" v-checkSubmit>确认</button> </div> </template> <script lang='ts'> import { Component, Vue, Prop } from 'vue-property-decorator'; import { max, min, required, name, pattern} from 'rules'; @Component({ components: {}, }) export default class Auth extends Vue { private show: boolean = true; private userName: string = ''; private inputNameMax = max('请不要超过20个字符'); private inputNameMin = min('请不要小于3个字符'); private inputNameRequired = required('请输入用户名'); private inputNamePattern = pattern('请输入符合要求的用户名', /^[a-zA-Z0-9_-]{4,16}$/); private submit() { alert('通过校验'); } } </script>
通过这个例子我们可以看到，使用时需要将校验规则引入并赋给vue实例中的数据。然后在模板中，需要给 input 标签添加 v-check 类名，再使用 v-validateParams 指令，并传入参数。提交按钮需要调用 v-checkSubmit 指令。按照这种方式就能够使用自己开发的这个表单校验插件。
3. 当前方式存在的问题
虽然表单校验可以使用了，但是存在一些显而易见的问题：
1.js和html耦合度较高，插件还需要获取dom元素，组件的html模板中还需要添加指定的类名。
2.在vue中使用dom操作，不符合vue的设计思路，实现方式也不优雅。
3.校验规则的校验逻辑在指令定义时写定了，添加或删除都需要改动插件代码。
4.提交指令根据当前组件内的是否含有特定dom来判断当前校验状态，且执行提交的函数名称也在指令逻辑中写定了。
我根据现有一个demo结合着自己的需求来实现的这个表单校验插件，开发的过程中我已经知道这么写问题很多，甚至不能称之为一个合格的插件。同时也清楚的认识到自己的javascript水平还很初级，需要很大进步。
当前开发的表单插件的主要问题在于如何将插件中的校验状态返回到组件内。我们可以在插件内维护一个事件处理函数，将校验规则传入并校验，再将校验结果直接传给组件内。这样就可以避免大量的dom操作。之后我需要尽快对这个插件进行更科学合理的重构。
总结
以上所述是小编给大家介绍的使用vue自定义指令开发表单验证插件validate.js，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: