vee-validate实现中文表单验证提示和vue自定义验证扩展效果代码
代码语言:html
所属分类:验证
代码描述:vee-validate实现中文表单验证提示和vue自定义验证扩展效果代码,包含vee-validate自定义验证及密码强度验证提醒、邮箱两次输入验证等效果。
代码标签: vee-validate vue 表单 验证
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
padding: 15px;
}
input {
padding: 3px 7px;
margin-bottom: 5px;
}
input.has-error {
background: #fcc;
border: 1px #f00 solid;
}
.err-msg {
margin: 0.7em 0 0;
color: #f00;
font-size: 12px;
}
.item {
padding: 15px;
margin: 0 0 10px 0;
background: #eee;
display: flex;
}
.item .title {
width: 200px;
padding: 0 20px 0 0;
}
.item .field {
flex: 1;
}
.password-strength {
width: 200px;
padding: 4px;
text-align: center;
background: #f30;
}
.password-strength1 {
background: #fa0;
}
.password-strength2 {
background: #fffa4e;
}
.password-strength3 {
background: #91ff00;
}
.password-strength4 {
background: #00f34f;
}
.form-table {
border: #ccc solid 1px;
border-right: none;
border-bottom: none;
}
.form-table th {
padding-right: 20px;
}
.form-table th, .form-table td {
border: #ccc solid 1px;
border-left: none;
border-top: none;
}
.form-table td.has-error {
background: #f.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0