可以使用
Vue.js的内置
校验器和自定义
校验器来对
表单进行
校验。
内置
校验器：
Vue.js提供了内置的
校验器，可以通过在
表单元素上添加一些属性来启用这些
校验器。例如：
- required：必填项
- email：邮箱格式
- min：最小值
- max：最大值
- minlength：最小长度
- maxlength：最大长度
- pattern：
正则表达式
示例：
```html
<template>
<div>
<
form>
<lab
el for="name">姓名：</lab
el>
<input type="text" id="name" v-mod
el="name" required>
<lab
el for="email">邮箱：</lab
el>
<input type="email" id="email" v-mod
el="email" required>
<lab
el for="age">年龄：</lab
el>
<input type="number" id="age" v-mod
el="age" min="18" max="60">
<lab
el for="password">密码：</lab
el>
<input type="password" id="password" v-mod
el="password" minlength="6" maxlength="16" pattern="^[a-zA-Z0-9]{6,16}$">
<button type="submit">提交</button>
</
form>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
age: '',
password: ''
}
}
}
</script>
```
自定义
校验器：
除了内置
校验器外，我们还可以使用自定义
校验器来
校验表单。自定义
校验器需要定义一个方法，在该方法中对
表单元素的值进行
校验。如果
校验不通过，可以返回一个错误信息，否则返回true。
示例：
```html
<template>
<div>
<
form>
<lab
el for="username">用户名：</lab
el>
<input type="text" id="username" v-mod
el="username" v-validate-username>
<button type="submit">提交</button>
</
form>
</div>
</template>
<script>
export default {
data() {
return {
username: ''
}
},
methods: {
validateUsername() {
//
校验用户名
if (this.username === 'admin') {
return true
}
else {
return '用户名必须为admin'
}
}
},
directives: {
validateUsername: {
bind(
el, binding, vnode) {
const validate = vnode.context.validateUsername
el.addEventListener('input', () => {
const res = validate()
if (res === true) {
el.classList.remove('error')
el.classList.add('success')
}
else {
el.classList.remove('success')
el.classList.add('error')
alert(res)
}
})
}
}
}
}
</script>
```
在上面的例子中，我们定义了一个自定义
校验器v-validate-username，该
校验器绑定在用户名输入框上。当用户输入框的值改变时，会触发
校验器的回调函数validateUsername()，该函数会
校验用户名是否为'admin'，如果不是，则返回一个错误信息，否则返回true。如果
校验不通过，会在输入框下方显示错误提示。如果
校验通过，则会在输入框下方显示成功提示。
8791
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
