- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
我是 vuelidate 的新手,一切正常,除了我不知道如何仅在单击 Submit 按钮时运行验证。现在,当您开始提供任何输入时,它会将触摸字段标记为红色,我希望它可以等待,直到用户想要提交填写好的表格。
这是我目前的情况:
Vue.use(window.vuelidate.default)
const { required, minLength, sameAs } = window.validators
new Vue({
el: "#app",
data: {
user: {
login: '',
password: '',
repeatedPassword: ''
}
},
validations: {
user: {
login: {
required,
minLength: minLength(5)
},
password: {
required,
minLength: minLength(8)
},
repeatedPassword: {
required,
sameAs: sameAs('password')
}
}
}
})
input {
border: 1px solid silver;
border-radius: 4px;
background: white;
padding: 5px 10px;
}
.error {
border-color: red;
background: #FDD;
}
.error:focus {
outline-color: #F99;
}
.valid {
border-color: #5A5;
background: #EFE;
}
.valid:focus {
outline-color: #8E8;
}
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
`<div id="app">
<input type="text" placeholder="login"
v-model="user.login"
v-on:input="$v.user.login.$touch"
v-bind:class="{error: $v.user.login.$error, valid: $v.user.login.$dirty && !$v.user.login.$invalid}">
<br/>
<input type="password" placeholder="password"
v-model="user.password"
v-on:input="$v.user.password.$touch"
v-bind:class="{error: $v.user.password.$error, valid: $v.user.password.$dirty && !$v.user.password.$invalid}">
<br/>
<input type="password" placeholder="repeat password"
v-model="user.repeatedPassword"
v-on:input="$v.user.repeatedPassword.$touch"
v-bind:class="{error: $v.user.repeatedPassword.$error, valid: $v.user.repeatedPassword.$dirty && !$v.user.repeatedPassword.$invalid}"
>
<button :disabled="$v.user.$error" @click="$v.user.$touch()">
Submit!
</button>
</div>`
最佳答案
我永远无法真正习惯 Vuelidate 的做事方式,但一般来说,它是这样工作的:https://monterail.github.io/vuelidate/#sub-basic-form
像这样设置允许您对每个表单输入/元素进行验证,然后全面检查表单是否“脏”和/或“无效”
form: {
"name": {
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params": {
"required": {
"type": "required"
}
}
},
"Age": {
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params": {
"required": {
"type": "required"
}
}
},
"$invalid": true, <------- This is what you are after for valid/invalid
"$dirty": false, <------- This is what you are after to see if the form has been used.
"$error": false, <------- This checks both invalid and dirty
"$pending": false,
"$params": {
"nestedA": null,
"nestedB": null
}
}
就在实践中使用它而言,一种选择是在提交时调用 validateform 事件。
@click.prevent="validateform"
然后在你的 vue 实例中创建一个 validateform 方法来检查
$v.form.$invalid or $v.form.$error
然后要么显示错误,要么调用实际的提交方法
关于javascript - Vuelidate:在单击时验证,而不是在触摸字段时验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45984086/
如何验证电子邮件? 你能举一个带有错误信息的例子吗? 文档没有提供足够的细节。 似乎没有什么像v-if="!$v.user.email.email" 以下代码也不起作用 validations: {
好的 - 搜索了很长一段时间,但找不到示例或使用 Vuelidate 的 OR 验证器。 this github issue中提到的那个无效,问题在不提供有效 OR 示例的情况下得到解决。 docs
在我们的 Vue 应用程序中,我们使用 Vuelidate用于表单验证。存在这种行为,即在页面呈现时验证字段,而仅应在表单提交中验证字段,如在提交处理中使用 $v.invalid 和 $v.touch
在 vuelidate 中添加可选验证对象的正确方法是什么? 给定验证形状: validations: { vehicles: { $each: { t
我正在为此表单使用 vuelidate 的电子邮件验证器: OnSite Contact Email Please provide a valid On
我正在使用 Vue,为了验证,Vuelidate . 当使用执行 AJAX 调用的自定义验证器时,它会在页面加载时触发多次,甚至在用户交互之前(vuelidate 的 $touch)。 在第一次加载这
我在使用 vuelidate 进行表单验证时遇到问题。我正在使用 Vue 2.9.6 和 vuelidate 0.7.5 我建议在阅读我的问题描述时打开这个 jsfiddle: jsfiddle.ne
我正在尝试结合前端和后端验证。 例如,在用户输入电子邮件的注册表单上,前端有一个 email 验证器,后端有一个 unique 验证器。 如果后端失败,则错误消息将保存到 requestErrorMe
在 Vuejs 中,在遵循 Vuelidate 安装说明 ( https://vuelidate.js.org/#getting-started ) 时,我在以下位置收到警告: 从“vuelidate
我正在尝试使用 vuelidate 验证输入字段。如果以下任一正则表达式为真,我需要它返回有效。 const val1 = helpers.regex('val1', /^\D*7(\D*\d){12
我使用 Bootstrap-Vue 构建了以下表单,其中应用了一些 Vuelidation 代码。 Ple
我正在使用 Vue.js,而且我是新手。我目前正在验证。我曾使用 vuelidate 作为我的验证库。我已经成功地完成了表单验证,但是当我必须检查复选框的验证时出现了问题。 如何检查复选框的验证?另外
我有一个表单,可以根据存储在 VUEX 存储中的参数 action 应用不同的验证。我试试这个: data: function() { const validations = { s
我在 vue 应用程序中有一个表单。 vue2-persian-datepicker 包用于波斯日期字段。我正在尝试使用 vuelidate 验证字段,我的问题是 pdatepicker 组件(来自
如果启用了功能(如果您选择了复选框),我试图让一个字段成为必填字段。但是该验证不会通过单击选择/取消选择复选框来触发 Enable Vue.js validations: {
我在 vuelidate 中遇到导致无限循环的问题。这是我的项目的简要过程。我有一个 datatable,我使用 Firebase OnSnapShot 函数对表格进行分页。该表具有操作列,单击时将显
假设我有一个包含如下数据的 vue 组件: data: () => ({ form: { old_password: { data: '', t
我需要根据元素本身的值来验证列表的元素。 我是否可以或应该为每个产品创建验证? new Vue({ el: "#app", data: { text: '', sons:
我将 VueJS2 与 vuelidate 一起使用图书馆。我可以根据验证对象验证字段。验证将在计算的时间内执行。但是我的验证对象是固定的,而不是动态的。我有一些字段会根据选择隐藏。 import {
如何使用 Vuelidate 对父组件内的嵌套组件进行验证?如果子组件中的输入有效或无效,我想更改 parentForm.$invalid。 家长: validations: {
我是一名优秀的程序员,十分优秀!