break;
}
}
校验不符合，执行报错函数
/**
* 执行错误提示函数，用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 class="form-item">
<label for="userEmail">用户名：</label>
<input id="userEmail" class='v-check' type="text" v-model="userName"
v-validateParams="[inputNameRequired, inputNameMin, inputNameMax, inputNamePattern]">
</div>
<button class="btn" 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 指令。按照这种方式就能够使用自己开发的这个表单校验插件。
