vee-validate实现中文表单验证提示和vue自定义验证扩展效果代码-html代码-BFW代码库

vee-validate实现中文表单验证提示和vue自定义验证扩展效果代码

代码语言：html

所属分类：验证

代码描述：vee-validate实现中文表单验证提示和vue自定义验证扩展效果代码，包含vee-validate自定义验证及密码强度验证提醒、邮箱两次输入验证等效果。

下面为部分代码预览，完整代码请点击下载或在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: #fcc;
        }
    </style>




</head>

<body>
    <form id="form" @submit.prevent="validateBeforeSubmit">
        <div class="item">
            <div class="title">数字<br><small>可不填</small></div>
            <div class="field" :class="{'has-error': errors.has('numeric')}">
                <input name="_num" type="text" placeholder="请输入数字" data-vv-as="数字" data-vv-name="numeric" v-validate="'numeric'">
                <p v-show="errors.has('numeric')" class="err-msg">{{ errors.first('numeric') }}</p>
            </div>
        </div>
        <div class="item">
            <div class="title">邮箱<br><small>必填</small></div>
            <div class="field">
                <input name="_email1" type="text" placeholder="xxx@xx.........完整代码请登录后点击上方下载按钮下载查看