Vue Datarule是一个轻量级的JavaScript库，能够对表单数据进行校验和验证。它提供了一些常见的验证规则，也支持自定义规则来满足特定业务需求。

Vue Datarule的使用非常简单。我们可以在Vue组件中引入它，并在表单元素上绑定相应的验证规则。例如：

<template>
<form>
<input v-model="username" v-datarule="'required|min:5|max:20'">
<input type="password" v-model="password" v-datarule="'required|min:6|max:16'">
<button @click="submit">提交</button>
</form>
</template>
<script>
import VueDatarule from 'vue-datarule';
export default {
data() {
return {
username: '',
password: ''
};
},
directives: { VueDatarule }
methods: {
async submit() {
if (await this.$datarule.validateAll()) {
// 表单验证通过，执行提交操作
}
}
},
};

在上述代码中，我们使用了v-datarule指令来绑定验证规则。这个指令接收一个字符串参数，多个规则之间用竖线分隔。例如，'required|min:5|max:20'表示该字段不能为空，且长度必须在5到20个字符之间。如果验证失败，Vue Datarule会自动在相应的表单元素下方显示错误信息。

Vue Datarule还支持自定义规则。我们可以在Vue实例中定义一个rules属性来存放自定义规则，例如：

<script>
import VueDatarule from 'vue-datarule';
const myRules = {
phone: {
validate(value) {
return /^1[34578]\d{9}$/.test(value);
},
message: '请输入正确的手机号码！'
}
};
export default {
data() {
return {
phone: ''
};
},
directives: { VueDatarule },
methods: {
async submit() {
if (await this.$datarule.validateAll()) {
// 表单验证通过，执行提交操作
}
}
},
rules: myRules
};

上述代码定义了一个自定义规则phone，用于验证手机号码格式。我们可以在表单元素中使用v-datarule="'phone'"来应用该规则。相应的错误信息会自动显示在页面上。

综上所述，Vue Datarule是一个非常好用的表单验证库。它的使用非常简单，支持常见的验证规则和自定义规则，能够有效地提高表单提交的数据安全性。