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