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: #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@xxx.xxx" data-vv-as="联系人邮箱" data-vv-name="email1" v-validate="'required|email|confirmed:_email2'" :class="{'has-error': errors.has('email1') }">
<input name="_email2" type="text" placeholder="xxx@xxx.xxx" data-vv-as="请在此输入一次邮箱" data-vv-name="email2" :class="{'has-error': errors.has('email1') }">
<p>
<span v-show="errors.has('email1')" class="err-msg">{{ errors.first('email1') }}</span>
</p>
<p>
<span v-show="errors.has('email1:required')" class="err-msg">邮箱必填</span>
<span v-show="errors.has('email1:email')" class="err-msg">邮箱格式不对</span>
<span v-show="errors.has('email1:confirmed')" class="err-msg">两次输入的邮箱不一致</span>
</p>
</div>
</div>
<div class="item">
<div class="title">邮编<br><small>可不填</small></div>
<div class="field" :class="{'has-error': errors.has('postal')}">
<input name="_postalcode" type="text" placeholder="xxx-xxxx" v-model="postalCode" data-vv-as="邮编" data-vv-name="postal" v-validate="'postal'">
<input type="button" value="选择邮编" :disabled="errors.has('postal')" @click="postalCodeAutoInput()"></input>
<p v-show="errors.has('postal')" class="err-msg">{{ errors.first('postal') }}</p>
<div>邮编
<select v-model="address.pref">
<option value="">选择爱好</option>
<option v-for="prefname in prefectures" :value="prefname">{{ prefname }}</option>
</select>
</div>
<div>省市区<input name="_address2" type="text" v-model="address.city"></input>
</div>
<div>街道村<input name="_address3" type="text" v-model="address.address"></input>
</div>
</div>
</div>
<div class="item">
<div class="title">电话号码<br><small>可不填</small></div>
<div class="field" :class="{'has-error': errors.has('tel')}">
<input name="_tel" type="text" placeholder="xxx-xxxx-xxxx" data-vv-as="电话号码" data-vv-name="tel" v-validate="'tel'"><br>
<p v-show="errors.has('tel')" class="err-msg">{{ errors.first('tel') }}</p>
</div>
</div>
<div class="item">
<div class="title">设置密码<br><small>可不填</small></div>
<div class="field" :class="{'has-error': errors.has('secure-password')}">
<input name="_secure_password" type="password" placeholder="请输入密码" v-model="password" data-vv-as="请输入密码" data-vv-name="secure-password" v-validate="'secure-password|min:8|max:32'">
<div class="password-strength" v-if="passwordCheck" :class="'password-strength'+passwordCheck.score">{{passwordCheck.label}}</div>
<p v-show="errors.has('secure-password')" class="err-msg">{{ errors.first('secure-password') }}</p>
</div>
</div>
<div class="item">
<div class="title">自定义<br><small>可不填</small></div>
<div class="field" :class="{'has-error': errors.has('custom')}">
<input name="_custom" type="text" placeholder="Test" data-vv-as="自定义" data-vv-name="custom" v-validate="'tel'" :class="{'has-error': errors.has('custom') }"><br>
<p v-show="errors.has('custom')" class="err-msg">{{ errors.first('custom') }}</p>
</div>
</div>
<pre>{{errors.any()}}</pre>
<button type="submit">提交</button>
</form>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios-0.18.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script>
<script type="text/java.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0